Results 1 to 10 of 10

Thread: Javascript for MP3 Audio

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Javascript for MP3 Audio


    Edited
    - Thanks very, very much keyboard!


    Kenny
    Last edited by KennyP; 12-31-2014 at 12:02 AM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,899
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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>

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

    KennyP (12-25-2014)

  4. #3
    Join Date
    Mar 2011
    Posts
    1,899
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    Right as you edited your post.

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

    KennyP (12-25-2014)

  6. #4
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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

  7. #5
    Join Date
    Mar 2011
    Posts
    1,899
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    No problem at all! The code is a little bit complex so if there's any troubles let me know.

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

    KennyP (12-25-2014)

  9. #6
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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

  10. #7
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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");
    Last edited by KennyP; 12-25-2014 at 12:24 PM.

  11. #8
    Join Date
    Mar 2011
    Posts
    1,899
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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!
    Last edited by keyboard; 12-25-2014 at 12:37 PM. Reason: Fixed code

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

    KennyP (12-25-2014)

  13. #9
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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!

  14. #10
    Join Date
    Mar 2011
    Posts
    1,899
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    Awesome! Have a fantastic day

Similar Threads

  1. .m4a audio files
    By Burgin in forum Computer hardware and software
    Replies: 4
    Last Post: 03-14-2010, 09:55 PM
  2. Replies: 1
    Last Post: 09-19-2007, 02:05 AM
  3. Protected audio
    By happyhippie in forum The lounge
    Replies: 4
    Last Post: 08-03-2006, 08:24 AM
  4. convert audio
    By georgius in forum Other
    Replies: 0
    Last Post: 06-06-2006, 08:38 AM
  5. embedding *.PLS audio
    By Spinethetic in forum HTML
    Replies: 2
    Last Post: 02-12-2006, 07:53 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •