Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.