New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF3.5+ IE9+ Opr8+

HTML5 background audio player

Author: Dynamic Drive

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, 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)


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

Download the following external files that make up the script:

Step 2: Then in the BODY of your page where you wish the background music player to appear, add the below code:

Select All

You'll want to download the below media files if you want to quickly test out the script:

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:

<img class="play" src="play.gif" data-pausesrc="pause.gif" />

<input type="button" class="play" />

<a href="#" class="play">Play music</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:

<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.