Stacks4Stacks

In a couple of clicks, AudioPlayer can help you reliably embed MP3 files into your webpages. No more ugly audio player controls or expensive addons that are complicated to configure and severely limit your creative freedom! Your website users deserve an attractive audio player that is compatible with the broadest range of web browsers available; and this is exactly what AudioPlayer delivers.

AudioPlayer has been developed exclusively for RapidWeaver; not just code ripped from other audio player plugins! As a result of this, we were able to consultant with potential users and gather excellent feedback. The finished AudioPlayer stack is one of the finest audio players available for RapidWeaver. This stack replaces the former AudioDeckr stack by StackManiac.

You should consider using AudioPlayer if you don't need a stack as advanced as our Player stack, but you need something more customisable than LitePlayer. Alternatively if you need playlist support, then the Playlister stack might be more suitable to use.

Examples

Here are some real working examples of the AudioPlayer stack. The first example is AudioPlayer with the default settings applied:

This is a more minimal example of AudioPlayer, with changes to the colour scheme and removal of the background:

This example of AudioPlayer displays an attractive background image, which acts as artwork. The button sizes were also increased:

Flat style, with playback rate:

Combining AudioPlayer with a text stack and our free StandOut stack:

Setup

Please follow these instructions carefully for configuring a single AudioPlayer stack in your website:

1. Once installed into Stacks and RapidWeaver, add a Stacks page type to your project (if you've not done so already)
2. Open the Stacks Library and search for 'AudioPlayer'
3. Drag and drop a copy of the AudioPlayer stack into the page
4. In the AudioPlayer Basic Settings, configure the links to your MP3 and OGG audio files; these can be RapidWeaver resource links or links to audio files you've already published online
5. Change any of the other style or behavioural settings shown in the AudioPlayer settings
6. Switch to preview mode in RapidWeaver and check the AudioPlayer stack works as expected and scales to fit different screen sizes. Publish or export your page when done.

No audio playing on the published website?

The most common reason for audio not playing is broken links or audio files not saved properly into the recommended formats. AudioPlayer does not change the location of your audio files or re-convert them into other formats. It is best practice to take the MP3 link you used in the AudioPlayer settings and paste it into a new web browser tab or window address bar. If the audio file does not play in the normal web browser window, then this indicates your audio file is either corrupt or doesn't exist at the location you specified. Please check your links and file conversions carefully before requesting support.

MP3 and OGG audio files

Nearly all web browsers support MP3 files nowadays, so the provision of audio in OGG format is less important. Traditionally Mozilla and some other web browser companies refused to pay the commercial license fees needed to support MP3 in their browsers and only favoured opensource formats like OGG. This dispute appears to have since been resolved, so MP3 support has been added to web browsers like Firefox, for the time being at least.

You may still wish to provide audio files in both MP3 and OGG format, if you want to guarantee yourself the widest possible web browser support. Free software like Handbrake can be used to quickly convert audio files into MP3 and OGG formats, ready for use online. Only ever use MP3 and OGG files in this stack. Other audio file formats are much less likely to work. You should also respect copyright and only use audio files that you own or have explicit formal permission to reproduce online.

Storage of audio files

Small audio files (of less-than 5MB) are usually okay to attach to RapidWeaver projects as resources. You can then link to these resourced audio files via the normal link dialogue window in RapidWeaver (select 'resources' from the pull-down menu). However for bigger audio files, you may find RapidWeaver becomes unstable or takes far longer to publish your website; so warehousing audio files might be a better option. If you're serving lots of audio files to thousands or millions of users worldwide, using a CDN (content delivery network) like Amazon S3 may be very beneficial.

Using multiple AudioPlayer stacks on the same webpage

You can use an unlimited number of AudioPlayer stacks on the same webpage. By default, the Pause On Outside Click option is enabled; which will instantly pause the playing audio if a user clicks or taps outside of the player interface. This avoids the problem of audio continuing to play in collapsed panels or when another media player on the same webpage is started.

Responsive and mobile compatibility

AudioPlayer is a fully-responsive stack element; meaning that the stack will scale down on smaller screens and will not become cropped or broken. The stack works best when placed inside a responsive RapidWeaver theme, like the ones distributed by ThemeFlood.

The volume control is automatically hidden on all screens less-than 996px wide, to conserve space. Some mobile platforms (like iOS and Android) do not permit users to change their device volume level via software. So the volume control isn't really something that is missed on smaller screens.

iOS and Android do not support the preloading of media content, so the duration of the audio clip is not shown until you start to play the audio. Additionally it should be noted that autoplay is not supported on mobile devices and some desktop web browsers. It is wise not to rely on autoplay functionality, as a core component of your completed pages.

On screens less-than 568px wide, the progress bar is hidden and replaced with a trailing slash (/) character, if either the audio time or duration are enabled in the stack settings. Again this has been done to conserve space and to remove functionality which may serve limited purpose to users on mobile devices.