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:
Step 1: Add the below script to the
<HEAD> section of your page:
Download the following external files that make up the
script:
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:
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:
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:
