InlinePlayer works by scanning your webpage for audio file links. It then converts those links into a simple little HTML5 audio player, within the existing page flow. InlinePlayer is a welcome addition to any webpage where you need to display a basic audio player; in place of regular links which would just otherwise display the audio file in a new tab or browser window. This stack can handle sound effects, music, audio books and podcasts; of any file size or duration. Clicking or tapping anywhere outside of an InlinePlayer pauses it; so you can avoid the problem of multiple audio tracks accidentally playing at the same time. InlinePlayer does not offer a replacement for more advanced audio players already available, like MixingDeck, Player or Playlister.

We currently support the detection of five audio formats in your webpage, for conversion into InlinePlayers. These being .mp3 format, .m4a AAC (also known as H.264 format - which is the audio component of .mp4 video), Windows Media Player .wav format, plus opensource .ogg and .oga formats. Typically MP3 is the most commonly used and widely supported audio format on the internet.

Please note that InlinePlayer requires Stacks 3. This stack will not install or function in Stacks 2 or less. Additionally InlinePlayer offers limited copyright protection of audio tracks, and it would still be feasible for people to extract the links (from the source code) and download your audio files for offline use.

Example

Here are some working examples of the InlinePlayer stack. Of particular note; clicking anywhere outside of the active InlinePlayer pauses it and the players are fully responsive.

Canadian National Anthem
Italian National Anthem
United Kingdom National Anthem
United States National Anthem

Setup

To get InlinePlayer working in your website, follow these instructions...
  1. Once downloaded and installed into RapidWeaver, open your stacks library and drag-and-drop a copy of InlinePlayer into your webpage
  2. Create some text links in your page to audio files hosted on your web server or added as resources to RapidWeaver. The text used for the link becomes the audio track title displayed within the player
  3. Customise any of the style or colour settings presented to you in the InlinePlayer settings. Mouseover individual settings to see a tooltip about what each one does
  4. Preview your page to make sure InlinePlayer is working as expected. Publish the website when done.

Many style, layout and colour setting exist within InlinePlayer. You can have your InlinePlayers rendered as a block element (as we've done in the examples above), or as left / right floating elements with text wrapping around the player. Track titles can be toggled off in the stack settings if they are not required, leaving InlinePlayer with just a play / pause button displaying. InlinePlayers are rendered wherever your audio links exist in the page flow. Should somebody arrive at your website with Javascript disabled, the regular audio link will be displayed in the page. All InlinePlayers share the same styling on each page of your website.

Only use audio files on your website which you hold the copyright to or have permission to reproduce online. All audio file links must be web-safe; that is to mean no spaces or special characters in either the path or the file names. Simply put, if you cannot access an audio file via the web browser address bar, then the same link is not going to work within InlinePlayer!

If you're finding audio files are downloading instead of playing within InlinePlayer, you may need to speak with your web hosting company and ensure that they have the correct MIME types setup for audio files. These are instructions stored on the web server, that tell web browsers what to do with different file formats they encounter.

Creating links

The easiest option is just to type some text in your page:

My track

Highlight the text with your mouse cursor and set it as a link, using the normal link controls in RapidWeaver. Links setup with HTML code or Markdown will also work fine for this task:

<a href="http://example.com/resources/file.mp3">My track</a>

[My track](http://example.com/resources/file.mp3)

The text that forms the link becomes the title of the audio track displayed within InlinePlayer. So in the above example, 'My title' will be shown as the title of the audio track.

Restricting InlinePlayer to convert audio links only within a specific part of the page

By default, InlinePlayer will scan your entire webpage and convert all audio file links (from the list of default supported file types) it finds into InlinePlayers. However there may be instances where you wish to preserve audio links in their original format in some parts of the page, prevent conversion of certain audio file formats or avoid InlinePlayer conflicting with another audio player already present on the same webpage. In the InlinePlayer advanced settings, you can adjust the InlinePlayer scope, to adjust exactly which audio files (and formats) InlinePlayer will find and convert to InlinePlayers.

By default, the scope comprises of selector names like this following:

a[href$="mp3"], a[href$="m4a"], a[href$="wav"], a[href$="ogg"], a[href$="oga"]

This tells InlinePlayer to find and convert all MP3, M4A, WAV, OGG and OGA files. However you can narrow the scope further by applying ID selector names, which restrict InlinePlayer to the audio links within a single divisional container:

#myDiv a[href$="mp3"], #myDiv a[href$="m4a"], #myDiv a[href$="wav"], #myDiv a[href$="ogg"], #myDiv a[href$="oga"]

or you can do the same, using class selector names:

.myDiv a[href$="mp3"], .myDiv a[href$="m4a"], .myDiv a[href$="wav"], .myDiv a[href$="ogg"], .myDiv a[href$="oga"]

This is an advanced function of InlinePlayer and 99% of the time you probably never need to change it. But should you wish to control exactly which audio links are converted to InlinePlayers, this is where you'd do it. You can obtain ID and class selector names using developer tools, in your preferred web browser.