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.

HTML Code:

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

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 -

HTML Code:

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

PHP Code:


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

Thread: Javascript for MP3 Audio

Thread Tools

Search Thread

Javascript for MP3 Audio

The Following User Says Thank You to keyboard For This Useful Post:

The Following User Says Thank You to keyboard For This Useful Post:

The Following User Says Thank You to keyboard For This Useful Post:

The Following User Says Thank You to keyboard For This Useful Post:

Similar Threads

.m4a audio files

Cut audio out of vid for download - to keep the audio

Protected audio

convert audio

embedding *.PLS audio

Bookmarks

Bookmarks

Posting Permissions