PDA

View Full Version : Resolved Javascript for MP3 Audio



KennyP
12-24-2014, 11:38 AM
Edited - Thanks very, very much keyboard!


Kenny

keyboard
12-25-2014, 11:27 AM
The below code should do everything you asked for. The onmouseover and onmouseout will allow you to create a hover state for each. I've included them in the code.
If you want a jquery version feel free to ask. Or if there are any issues.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
background-color:transparent;
background-image:url("buttons/custom/play.png");
background-repeat:no-repeat;
cursor:pointer;
height:24px;
width:48px;
border:none;
vertical-align:middle;
}
</style>
</head>
<body>
<button type="button" class="play"></button>
<audio class="audio" src="mp3s/rt-hook-line-and-sinker.mp3"></audio>

<button type="button" class="play"></button>
<audio class="audio" src="mp3s/rt-last-night's-memories.mp3"></audio>

<button type="button" class="play"></button>
<audio class="audio" src="mp3s/rt-a-rose-in-the-devil's-garden.mp3"></audio>

<script type="text/javascript">
var buttons = document.getElementsByClassName('play'); //Store all the buttons into an array
var audios = document.getElementsByClassName('audio'); //Store all the audios into an array

function stop(i) { //Called when we want to stop playing
buttons[i].style.backgroundImage = "url(\"buttons/custom/play.png\")";
audios[i].pause();
audios[i].currentTime = 0;
}

function start(i) { //Called when we want to start playing
for(var l=audios.length-1; l>=0; l--) { //Loop through all the audio files and stop them before playing a new one
if(!audios[l].paused) {
stop(l);
}
}
buttons[i].style.backgroundImage = "url(\"buttons/custom/stop.png\")";
audios[i].play();
}

for(var i=buttons.length-1; i>=0; i--) { //Loop through each of the buttons
(function(u) { //Creates a closure so we can access the index of the object within a callback

buttons[u].onclick = function() { //When a button is clicked
if(audios[u].paused) { //If the associated audio is paused
start(u); //Start it
} else {
stop(u); //Otherwise stop it
}
};

buttons[u].onmouseover = function() { //When a button is moused over
if(audios[u].paused) { //If the associated audio is paused

} else {

}
};

buttons[u].onmouseout = function() { //When a button is moused out
if(audios[u].paused) { //If the associated audio is paused

} else {

}
};

audios[u].addEventListener('ended', function() { //When an audio file finishes
stop(u); //Stop it so that it will reset
}, false);

})(i); //End of the closure
}
</script>
</body>
</html>

keyboard
12-25-2014, 11:28 AM
Right as you edited your post. :(

KennyP
12-25-2014, 11:30 AM
Keyboard - Thank you so much - I thought my initial request was too much to ask, so I thought of starting out with SoundManager2 and asking for help to alter it to suit my need.

I'll definitely make use of your script - Thanks so very, very much - Kenny

keyboard
12-25-2014, 11:30 AM
No problem at all! The code is a little bit complex so if there's any troubles let me know.

KennyP
12-25-2014, 11:53 AM
I just entered the script into the page and the stop and play images display perfectly. Of course the hover states will work as soon as I get the proper images in place.

The code is now here in the live page. (www.billyjoeconor.com/freebies/ringtones/select-ringtone.php)

I'll post again as soon as it's complete.

Thank you again so very much,

Kenny

KennyP
12-25-2014, 12:14 PM
Actually, if you would please show me, I can't figure out where to enter the two mouseover images.

Play mouseover image: url("buttons/custom/playover.png");


Stop mouseover image: url("buttons/custom/stopover.png");

keyboard
12-25-2014, 12:25 PM
Try this -

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
background-color:transparent;
background-image:url("buttons/custom/play.png");
background-repeat:no-repeat;
cursor:pointer;
height:24px;
width:48px;
border:none;
vertical-align:middle;
}
</style>
</head>
<body>
<button type="button" class="play"></button>
<audio class="audio" src="mp3s/rt-hook-line-and-sinker.mp3"></audio>

<button type="button" class="play"></button>
<audio class="audio" src="mp3s/rt-last-night's-memories.mp3"></audio>

<button type="button" class="play"></button>
<audio class="audio" src="mp3s/rt-a-rose-in-the-devil's-garden.mp3"></audio>

<script type="text/javascript">
var buttons = document.getElementsByClassName('play'); //Store all the buttons into an array
var audios = document.getElementsByClassName('audio'); //Store all the audios into an array

function stop(i) { //Called when we want to stop playing
buttons[i].style.backgroundImage = "url(\"buttons/custom/play.png\")";
audios[i].pause();
audios[i].currentTime = 0;
}

function start(i) { //Called when we want to start playing
for(var l=audios.length-1; l>=0; l--) { //Loop through all the audio files and stop them before playing a new one
if(!audios[l].paused) {
stop(l);
}
}
buttons[i].style.backgroundImage = "url(\"buttons/custom/stop.png\")";
audios[i].play();
}

for(var i=buttons.length-1; i>=0; i--) { //Loop through each of the buttons
(function(u) { //Creates a closure so we can access the index of the object within a callback

buttons[u].onclick = function() { //When a button is clicked
if(audios[u].paused) { //If the associated audio is paused
start(u); //Start it
} else {
stop(u); //Otherwise stop it
}
};

buttons[u].onmouseover = function() { //When a button is moused over
if(audios[u].paused) { //If the associated audio is paused
buttons[u].style.backgroundImage = "url(\"buttons/custom/playover.png\")";
} else {
buttons[u].style.backgroundImage = "url(\"buttons/custom/stopover.png\")";
}
};

buttons[u].onmouseout = function() { //When a button is moused out
if(audios[u].paused) { //If the associated audio is paused
buttons[u].style.backgroundImage = "url(\"buttons/custom/play.png\")";
} else {
buttons[u].style.backgroundImage = "url(\"buttons/custom/stop.png\")";
}
};

audios[u].addEventListener('ended', function() { //When an audio file finishes
stop(u); //Stop it so that it will reset
}, false);

})(i); //End of the closure
}
</script>
</body>
</html>

The bit changed was here -

buttons[u].onmouseover = function() { //When a button is moused over
if(audios[u].paused) { //If the associated audio is paused
buttons[u].style.backgroundImage = "url(\"buttons/custom/playover.png\")";
} else {
buttons[u].style.backgroundImage = "url(\"buttons/custom/stopover.png\")";
}
};

buttons[u].onmouseout = function() { //When a button is moused out
if(audios[u].paused) { //If the associated audio is paused
buttons[u].style.backgroundImage = "url(\"buttons/custom/play.png\")";
} else {
buttons[u].style.backgroundImage = "url(\"buttons/custom/stop.png\")";
}
};


Merry Christmas!

KennyP
12-25-2014, 12:41 PM
It's all working perfectly keyboard, and the code is on the live page (http://www.billyjoeconor.com/freebies/ringtones/select-ringtone.php). Thank you thank you and Merry Christmas to you as well. You sure made mine! :)

keyboard
12-25-2014, 12:43 PM
Awesome! Have a fantastic day :)