HTML5 background audio player
Description: HTML5 background audio player lets you play "soothing" background music on your pages with a simple user interface to control basic tasks such as stopping or lowering its volume. Unlike a regular audio player, it can remember the player's current point in the music playback, volume, and whether it's paused within a browser session, so as the user transitions from page to page, the music continues where it last left off with minimal disruptions.
HTML5 audio (the <audio> element) is supported in IE9+, FF3.5+, Chrome/Safari 3+, and Opera 10.5+. The player automatically hides the player UI in browsers that don't support it.
Demo (reload page to see how the music picks up from where it last left off):
Music credits: Marion Harris "I Ain't Got Nobody" (public domain music)
Step 1: Add the below script to the <HEAD> section of your page:
Download the following external files that make up the script:
bgaudioplayer.css (CSS that styles the default UI of the audio player)
(3 images that make up the player's default UI)
Step 2: Then in the BODY of your page where you wish the background music player to appear, add the below code:
You'll want to download the below media files if you want to quickly test out the script:
MarionHarris-IAintGotNobody.mp3 (sample audio file)
MarionHarris-IAintGotNobody.ogg (sample audio file's fallback version)
That's it for basic installation.
The code of Step 2 is mainly where you'll be modifying to get the player running the way you want it to. It can be thought of as 3 distinct sections.
Section 1: The <audio> element
Firstly, modify the
<audio> element to point to the
audio file you wish to play (plus a list of fall back files depending on browser
<source src="MarionHarris-IAintGotNobody.mp3" type="audio/mpeg">
<source src="MarionHarris-IAintGotNobody.ogg" type="audio/ogg">
Notice how the element should be given an arbitrary but unique
ID attribute value. Moving on, using the
<source> tag, you'll want
to include at least a "mp3" and "ogg" version of the audio file to cover support
for the major browsers, plus specify an appropriate
in case the browser gets confused. Below lists the common audio types
To convert an audio file from one type to another, try an online converter such as this one.
Section 2: The UI (User Interface) container
Next inside the code of Step 2, you come across the HTML markup for the corresponding UI for the player:
<img class="play" src="play.gif" data-pausesrc="pause.gif" /> <img class="rewind" src="restart.gif" style="position:relative; top:1px; left:-4px" /> <div class="volume"></div>
This should just be an regular DIV with an arbitrary/unique ID plus the CSS class ("bgplayerui"). Then inside this DIV, simple define elements to act as the play/pause button, rewind button, and volume control. All of these elements are optional, and it's up to you to decide how you want to define and place them within the UI. The script simply will look for elements within the UI carrying certain CSS classes and apply function to them accordingly. Those CSS classes are:
|class="play"||Script will turn the first element within the
UI carrying this CSS class into a "play/pause" button. If the element is
an image, you should also define a
|class="rewind"||Script will turn the first element within the UI carrying this CSS class into a "rewind" button. A rewind button when clicked on will return the music to the very beginning, and if the music is currently playing, pause it (and visa versa).|
|<div class="volume">||A div with the CSS class "volume" will be transformed by the script into a volume control. You can customize some aspects of this control inside bgaudioplayer.css.|
Section 3: The initialization code
With the <audio> element and the UI container defined, we arrive at the final piece of the equation, the initialization code:
audioid: 'mybgplayer', // id of audio element
audiointerface: 'mybgplayerui', // id of corresponding UI div
autoplay: true, // auto play music?
persistTimeLine: true, // Persist player's current timeline/ volume when moving from page to page?
volume: 0.1, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
bgaudioplayer() and assign it to an
arbitrary but unique variable name for each instance of the player on your
playerinstance), though most likely you'll only be
creating a single instance anyway. Inside this function pass in the desired
settings, which are as follows:
|The ID of
|The ID of the corresponding User Interface DIV for the player.|
defaults to true
|Boolean on whether player should automatically play when the page loads.|
defaults to true
Boolean on whether the script should persist the current player's timeline, volume, and whether it's paused within a browser session. If the user reloads the page or goes to another page on the same site with the player embedded, the music will resume where it last left off.
defaults to 0.5
|Sets the initial volume of the player. Should be a decimal from 0 to 1, where 1 is 100% volume, 0.1 is 10%, 0.3 is 30% etc.|
defaults to 10
|Sets the refinement level of the volume control within the UI DIV. A value of 10 for example means 10 bars will be shown inside the volume control, giving users|
bgaudioplayer() must be called
following sections 1 and 2 above, or wrapped inside jQuery's DOM onload
event handler to execute when the page has loaded.
Creating controls outside the player's UI DIV to control the player
Aside from the buttons inside the player's UI container, you
can also create your own custom controls to control the player outside this
container. To do so, call the method
playfile() that's added to
the variable you assigned
bgaudioplayer() to when initializing
The variable in this case is "
Using it, you can control the player from anywhere on your page on demand,
playerinstance.play(). Four possible variations
Depending on the parameter passed into the
method, a different action is performed.