Creating multiple instances of the HTML5 background audio player [Archive]

View Full Version : Creating multiple instances of the HTML5 background audio player

solaningo

03-24-2012, 03:16 PM

1) Script Title: HTML5 background audio player

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/html5audioplayer.htm

3) Describe problem:
Hello! I am a designer with very little experience with working with Javascript functions, so please go easy on me with the technical stuff. I'm trying to run multiple instances of this tool on a site, and I'm having trouble getting the second instance to work. I'm sure it's just a fussy syntax issue that I'm just not seeing as a newbie, but after staring at it for hours I'm stumped. If anyone can give me a quick pointer to where I'm going wrong, that would be really super.

Index File

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Harpwings -- The Website of Arielle Galante, Harpist.</title>

<link href="bgaudioplayer.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="bgaudioplayer.js">

/***********************************************
* HTML5 background audio player (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<link rel="stylesheet" href="/index.css">
<link href="index.css" rel="stylesheet" type="text/css">

<link href='http://fonts.googleapis.com/css?family=Lustria' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Norican' rel='stylesheet' type='text/css'>

</head>

<body>

<div class="page-header">
<h1>
Harp Wings</h1><h2>The website of Arielle Galante, Harpist, Vocal Performer, Music Instructor, Math Tutor.
</h2>
</div>

<div class="span4">
Born and raised just outside of Chicago IL, Arielle recently graduated from the University of Miami with a BFA in Harp Performance. Her musical roots are in classical harp and jazz voice, and she now writes in a variety of styles depending on her mood: Folk, Rock, Country, Jazz, Pop, you name it.
</div>

<div class="offset 4">
Chasing Fire

<div id="audio">

<audio id="mybgplayer">
<source src="ChasingFire.mp3" type="audio/mpeg">
</audio>

<div id="mybgplayerui" class="audio">
<img class="play" src="play.gif" data-pausesrc="pause.gif" /> <img class="rewind" src="restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div>
</div>
<script>
var playerinstance=bgaudioplayer({
audioid: 'mybgplayer', // id of audio element
audiointerface: 'audio', // 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: 1.0, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
})
</script>
</div></div>

<br />Door To Paradise
<div id="doorto">

<audio id="door">
<source src="DoortoParadise.mp3" type="audio/mpeg">
</audio>

<div id="mybgplayerui" class="doorto">
<img class="play" src="play.gif" data-pausesrc="pause.gif" /> <img class="rewind" src="restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div>
</div>
<script>
var playerinstance=playerinstance({
audioid: 'door', // id of audio element
audiointerface: 'doorto', // id of corresponding UI div
autoplay: false, // auto play music?
persistTimeLine: true, // Persist player's current timeline/ volume when moving from page to page?
volume: 1.0, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
})
</script>
</div>

<div class="span8">
Her musical roots are in classical harp and jazz voice, and she now writes in a variety of styles depending on her mood: Folk, Rock, Country, Jazz, Pop, you name it.
</div>

</body>
</html>
</html>

bgaudioplayer.css

div.bgplayerui{ /* Audio player UI DIV */
background: black;
padding: 3px;
padding-top:4px;
width: 220px;
height: ;
color: white;
}

div.audio .play, div.audio .rewind{ /* Audio player UI buttons style */
cursor: pointer;
}

div.audio div.volume { /* Volume control container */
display: inline-block;
height: 18px;
overflow: hidden;
}

div.audio div.volume div{ /* Individual volume bars within Volume container */
float: left;
width: 5px;
height: 100%;
line-height: 100%;
margin-right: 2px;
border: 1px solid black;
background: #666;
cursor: pointer;
-moz-box-shadow: inset 1px 1px 2px gray;
}

div.audio div.volume div.on{ /* Style of volume bar when it's on */
background: #FFC;
}

div.doorto .play, div.doorto .rewind{ /* Audio player UI buttons style */
cursor: pointer;
}

div.doorto div.volume { /* Volume control container */
display: inline-block;
height: 18px;
overflow: hidden;
}

div.doorto div.volume div{ /* Individual volume bars within Volume container */
float: left;
width: 5px;
height: 100%;
line-height: 100%;
margin-right: 2px;
border: 1px solid black;
background: #666;
cursor: pointer;
-moz-box-shadow: inset 1px 1px 2px gray;
}

div.doorto div.volume div.on{ /* Style of volume bar when it's on */
background: #FFC;
}

input[type=button]{
-moz-transition: all 0.3s ease-in-out;
background:#f6dca3;
color:black;
border:double;
border-radius:0.5em;
box-shadow:0 0.2em 0.5em black;
}

input[type=button]:focus{
border-color: darkred;
background:#f5ca6e;
}

index.css

<!DOCTYPE html>
<html lang="en">

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}

.audio {
height: 27px;
background:black;
padding: 2px;
padding-left: 10px;
padding-top: 4px;
margin-left: 350px;
width: 220px;
}

.doorto {
height: 27px;
background:black;
padding: 2px;
padding-left: 10px;
padding-top: 4px;
margin-left: 350px;
width: 220px;
}

body {
font-family: 'Lustria', serif;
color: #000;
font-size: 14px;
margin: 0px;
padding: 0px;
background-color:#FFC
background-image:"BG.jpg";
}

h1 {
font-family: 'Norican', cursive;
font-size:80px;
margin: 15px;
font-weight: bold;
color: #666;
text-rendering: optimizelegibility;
}

.input-block-level {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */

/* Makes inputs behave like true block-level elements */

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

a:hover {
color: #005580;
text-decoration: underline;
}

[class*="span"] {
float: left;
margin-left: 20px;
}
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}

.page-header {
height:auto;
padding-bottom: 0px;
margin: 18px 0;
border-bottom: 1px solid #eeeeee;
margin-left:50px;
margin-right:50px;
}

.span4 {
width: 300px;
padding: 15px;
background-color: #FF9;
margin-left:20px;
}

.offset4 {
width: 150px;
margin-left: 200px;
}

.span8 {
width: 500px;
padding: 15px;
background-color: #FF9;
margin-left: 340px;
align: bottom;
}

.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}

</html>

ddadmin

03-24-2012, 08:34 PM

The "audiointerface" setting inside each of your initialization code should point to the ID of the corresponding UI div on your page. See changes in red below:

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Harpwings -- The Website of Arielle Galante, Harpist.</title>

<link href="bgaudioplayer.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="bgaudioplayer.js">

/***********************************************
* HTML5 background audio player (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<link rel="stylesheet" href="/index.css">
<link href="index.css" rel="stylesheet" type="text/css">

<link href='http://fonts.googleapis.com/css?family=Lustria' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Norican' rel='stylesheet' type='text/css'>

</head>

<body>

<div class="page-header">
<h1>
Harp Wings</h1><h2>The website of Arielle Galante, Harpist, Vocal Performer, Music Instructor, Math Tutor.
</h2>
</div>

<div class="span4">
Born and raised just outside of Chicago IL, Arielle recently graduated from the University of Miami with a BFA in Harp Performance. Her musical roots are in classical harp and jazz voice, and she now writes in a variety of styles depending on her mood: Folk, Rock, Country, Jazz, Pop, you name it.
</div>

<div class="offset 4">
Chasing Fire

<div id="audio">

<audio id="mybgplayer">
<source src="ChasingFire.mp3" type="audio/mpeg">
</audio>

<div id="mybgplayerui" class="audio">
<img class="play" src="play.gif" data-pausesrc="pause.gif" /> <img class="rewind" src="restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div>
</div>
<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: 1.0, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
})
</script>
</div></div>

<br />Door To Paradise
<div id="doorto">

<audio id="door">
<source src="DoortoParadise.mp3" type="audio/mpeg">
</audio>

<div id="mybgplayerui2" class="doorto">
<img class="play" src="play.gif" data-pausesrc="pause.gif" /> <img class="rewind" src="restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div>
</div>
<script>
var playerinstance=playerinstance({
audioid: 'door', // id of audio element
audiointerface: 'mybgplayerui2', // id of corresponding UI div
autoplay: false, // auto play music?
persistTimeLine: true, // Persist player's current timeline/ volume when moving from page to page?
volume: 1.0, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
})
</script>
</div>

<div class="span8">
Her musical roots are in classical harp and jazz voice, and she now writes in a variety of styles depending on her mood: Folk, Rock, Country, Jazz, Pop, you name it.
</div>

</body>
</html>
</html>

solaningo

03-25-2012, 01:34 AM

Thank you so much for replying. I've applied the changes, and it doesn't seem to have fixed the problem. I suspect that it has something to do with these two bits on the code's page that I didn't quite understand...

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

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

The problem I'm having is that the first player displays perfectly and functions as planned, but the second player's volume bar does not show up despite my best efforts, and the play/pause button and restart button don't respond to clicking, either. This occurs even if I copy the code for the working player and paste it verbatim just below the first; the second for some reason just doesn't work. Could it have something to do with the java?

If you have any insight at all it would be extremely appreciated!!! I'm really at a loss here!

ddadmin

03-25-2012, 06:54 AM

Ah yes the variable assigned to the second player instance should also be changed from "playerinstance" to something else, such as "playerinstance2".

If that still doesn't help, please post a link to the problem page.

goodduck

04-05-2012, 07:11 PM

hello,

i am using this script on a page of mine and i was wondering if it was possible for the player to play multiple tracks? can i have it run through multiple tracks automatically?

edit

ideally i would like to have it play tracks at random and just cylce through them.

thank you for making the script in the first place

grammy

04-17-2012, 12:15 AM

Hi, I have this script installed and it seems incompatible with other jquery code like this for example:

$(document).ready(function() {

$('#menu_collection').click(function() {
$('#sub_collection').show(300, function() {
});
});

});

they both work if isolated but not together.
Can you help me?