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.
More Information
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
support):
<audio id="mybgplayer">
<source src="MarionHarris-IAintGotNobody.mp3" type="audio/mpeg">
<source src="MarionHarris-IAintGotNobody.ogg" type="audio/ogg">
</audio>
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 type
attribute
in case the browser gets confused. Below lists the common audio types
audio | type |
mp3 | audio/mpeg |
ogg | audio/ogg |
wav | audio/wav |
mp4 | audio/mp4 |
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:
<div id="mybgplayerui"
class="bgplayerui">
<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>
</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:
CSS class | Result |
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 "data-pausesrc"
attribute inside it pointing to the image's "pause" src. Here are some
examples:
|
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:
<script>
var playerinstance=bgaudioplayer({
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
})
</script>
Call bgaudioplayer()
and assign it to an
arbitrary but unique variable name for each instance of the player on your
page (ie: 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:
setting | Description |
audioid Required |
The ID of <audio> element in
question. |
audiointerface Required |
The ID of the corresponding User Interface DIV for the player. |
autoplay defaults to true |
Boolean on whether player should automatically play when the page loads. |
persistTimeLine 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. |
volume 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. |
volumelevels 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 |
Function 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
it:
var playerinstance=bgaudioplayer(settings)
The variable in this case is "playerinstance
".
Using it, you can control the player from anywhere on your page on demand,
by calling playerinstance.play()
. Four possible variations
exist:
<a href="javascript:playerinstance.playfile('pause')">Pause Music</a>
<a href="javascript:playerinstance.playfile('play')">Play Music</a>
<a href="javascript:playerinstance.playfile()">Play/ Pause</a>
<a href="javascript:playerinstance.playfile('replay')">Rewind</a>
Depending on the parameter passed into the playfile()
method, a different action is performed.