Cool Javascript MP3 Song Playback in Web Page with Custom Controls

Displaying first 30 comments.

1. Posted By: tvradio - radiofono1@gmail.com - April 10, 2008, 3:17 pm

Thank you for the code of cool mp3 player. With a little modification, we can listen a list mp3 of esnips using your coolmp3 player. Here is an example i made: http://www.filefactory.com/file/8f29de ( A little problem is that is starts play from 2nd song and then, by using the NextSong button. Then it plays normaly) ------------ About embed media-player in firefox without using quicktime, here is a solution i have use in my webpage: i use: http://users.otenet.gr/~tvradio/javaplayer3.js that plays mp3 using: playmedia(times,height,width,"songname") ---------- If it is possible, please remake your sound.js to be compatible with firefox, without using quicktime. ------------ Thanks again. Koltsidas Michael Greece

2. Posted By: tvradio - radiofono1@gmail.com - April 12, 2008, 1:40 pm

Good job, Thank you. I experimented with your javaplayer. It plays only in internet explorer. I tried and made a firefox-javaplayer that plays a list of esnips-songs.(http://www.esnips.com) My player can be found at http://users.otenet.gr/~tvradio/javajampa2.html It has an array of 300 song-IDs from esnips, then adds the time-function to allow direct playing songs in mediaplayer, reading from esnips. I know about nothing for java, but i try it. If anybody wants, he can improve it. You can use free my code. Koltsidas Michael (newby in java) radiofono1@gmail.com http://users.otenet.gr/~tvradio

3. Posted By: True_mesiash - - May 4, 2008, 7:50 am

I'm trying to use this script on my ActiveDesktop. And I'm getting error that looks something like this: "There was error in the script on this page Line: 1 Sign: 1 Error: Object expected Code: 0 URL: file// Do you want to continue using scripts on this page? YES | NO" [translation from my native language] In the Script I've removed parts that show ID3 Tag and time. [there were errors there] Java scripts are not my strong side. Please help. using IE7 but i think Active desktop might still use IE6.

4. Posted By: prachi - - May 13, 2008, 4:21 am

Good work..It has helped a lot for developing my own jukebox. But, the problem I find in this is that it does not play songs continously. i.e one after another..If possible, please help in doing that

5. Posted By: ranjeet - - July 10, 2008, 2:52 pm

I checked above code, it played only one song and stopped , it does not go automatically, i was looking player, which play online mp3 song automatically and randomly like offline radio. Please please help for this issue please. my email address is : randassy@yahoo.com

6. Posted By: Ross - - September 3, 2008, 4:27 am

Have to say huge thanks! This is exactly what I was looking for and testing for me so far in firefox has worked to perfection. Great job.

7. Posted By: ameet topare - - September 8, 2008, 5:41 am

i am getting the value of sound as 0 using document.embeds['sound'].GetVolume(); or document.getElementById('sound').getVolume()

8. Posted By: Josh - - September 26, 2008, 2:09 pm

I tried to use the code in an aspx page, and added the tags to the page. When viewing the page in Firefox it plays the song for about a second, and then stops. any help on this would be much appreciated. Thanks.

9. Posted By: Josh - - September 26, 2008, 2:11 pm

I tried to use the code in an aspx page, and added the "form" tags to the page. When viewing the page in Firefox it plays the song for about a second, and then stops. any help on this would be much appreciated. Thanks.

10. Posted By: kl - - November 17, 2008, 10:39 am

is there any way to hide the player and just have the buttons?

11. Posted By: KL - - November 17, 2008, 11:06 am

nevermind, figured out if you add the dimensions in the sound.js file to width="0" height="0" nothing shows up. Not sure how this is cross browser. But I also have a second question. Is there a way to just have one button that when you click it plays and when you click again, it stops playing? view here what i'm trying to do... http://www.peterprimamore.com/aboutpeter

12. Posted By: Jeff - - November 17, 2008, 5:59 pm

Change the play_song() function in sound.js to the function below and then the Play button will become both a play button and a stop button: function play_song() { // Check to see if current song has stopped if (document.getElementById('player').innerHTML == '') { load(media); setTimeout('display_time();', 1000); setTimeout('display_info();', 1000); display_song(); document.getElementById('play_btn').innerHTML = "Stop"; } else // otherwise stop it and change button text { stop_song(); document.getElementById('play_btn').innerHTML = "Play"; } } // end function play Jeff www.seabreezecomputers.com

13. Posted By: amadzay - - November 27, 2008, 9:40 am

how is it possibile, if the song1 in page1 is finished it goes automatically to page2 and plays song2 and so on.. thanks

14. Posted By: Jeff - - November 28, 2008, 11:53 am

The answer is in the function display_time() Look toward the bottom of display_time() function and change: // This is for Firefox if (time == duration) // if at end of song { next_song(2); // then play next song in playlist return; } // This is for Ie if (song_status == 1) // song stopped { next_song(2); return; } to sommething like: // This is for Firefox if (time == duration) // if at end of song { window.location = 'www.address.com'; // then load next page return; } // This is for Ie if (song_status == 1) // song stopped { window.location = 'www.address.com'; // then load next page return; } Then on page 2 instead of waiting for a play button to be pressed, you could call the play_song() function from the very bottom of the function loadsongs() Jeff www.seabreezecomputers.com

15. Posted By: Ekix - ekix@ekisoft.com - December 2, 2008, 3:54 pm

Hello guys, Sorry I'm a bit lost, so could someone give me an example of a working web page using this javascript system. I'm a bit confused how to do it, anyway I'd like to get my player to show the player also and a drop down to choose what the visitor wants to select selects to play. At the moment I'm using embedded Windows Media player in my web pahe, but it only works If anyone could help me a bit, that would be nice... Regards/ Ekix

16. Posted By: Ahmad - - December 22, 2008, 1:13 am

Hi, Thanks a lot for your script. I have changed window.onload = loadsongs; to window.onload = play_song; but the player can not find the soundfile but with function loadsongs work well. Demo at http://aua.info/islamstart/quransearch/randomSlide.php

17. Posted By: Ahmad - - December 23, 2008, 6:08 am

Hi, by luck I have resolved somehow the problem with window.onload = play_song; by myself.

18. Posted By: Ahmad - - December 31, 2008, 2:00 am

Hi, by following code, the player plays from the all list in frist page just one song and goes automatically to the next page How is it possibile that the player plays all tracks in first page and then goes to next page? // This is for Ie if (song_status == 1) // song stopped { window.location = 'www.address.com'; // then load next page return; } The player playing only one Track and goes to second page.

19. Posted By: Jeff - - December 31, 2008, 4:01 pm

Ahmad, to switch to a new page after all the songs have been played you would need to edit next_song(dir) function as follows. The change is the lines that say: if (current_song > playlist_length) current_song = 0; // loop to first song instead you would change it to: if (current_song > playlist_length) window.location = 'www.address.com'; // then load next page Jeff www.seabreezecomputers.com

20. Posted By: . - amad@yahoo.com - January 1, 2009, 5:22 am

Thnaks, it works. Now wenn I change window.onload = loadsongs; to window.onload = play_song; does`t play automaticaly songs wenn the page is loaded. I use IE 6.0 and Mozilla/5.0

21. Posted By: Jeff - - January 1, 2009, 12:33 pm

I never told you to change window.onload. Keep it as "window.onload = loadsongs;" And as I said in a comment earlier: Instead of waiting for a play button to be pressed, you could call the play_song() function from the very bottom of the function loadsongs() Jeff http://www.seabreezecomputers.com

22. Posted By: pawan vidya - - January 13, 2009, 2:11 am

hi , i m tring to play my selected song putted those in textarea but not successed. plz heklp me how i paly song with this script.

23. Posted By: tomguiss - - January 18, 2009, 2:11 pm

Hello, i want my webpage to load and start automatically a song, and juste have a button with "pause" and after clicking the text on the button would be "play" How can i make it ?

24. Posted By: Jeff - - January 19, 2009, 1:00 pm

In sound.js at the very bottom of the loadsongs() function add the line: play_song(); That will automatically start playing the music when the page is loaded. Then in your HTML document you could just put the control for the pause button: <!-- Start of player controls You can remove any of the controls if you do not want to have them. You can also remove information window DIV's at the bottom such as songname or songtime --> <DIV STYLE="border: 1px solid black; width: 340px; padding: 5px;"> <BUTTON ONCLICK="pause_song();" ID="pause_btn">Pause</BUTTON> </DIV> Jeff www.seabreezecomputers.com

25. Posted By: Dino67 - - March 9, 2009, 2:24 pm

Thanks for the code. It works great except in IE7. If the user refreshes my page in IE7 while the music is playing, an error is generated: "Unhandled win32 exception". This error may occur on the first refresh or on the second refresh of the page. It does not occur with other browsers. I've asked friends to check and they are experiencing the same porblem so it's not unique to my system. Any ideas as to why that would be hapeening?

26. Posted By: Dino67 - - March 9, 2009, 2:27 pm

I forgot to add to my previous post that I have my music set to play when the page loads, using play_song(), and I only have a 'stop' button, no other control visible. Other than that, I have made no changes to the code.

27. Posted By: James Crossett - - May 20, 2009, 3:00 am

Getting this thing cross browser for me seems more to do with platforms. Windows and Mac. Detecting platforms and delivering either Windows media or Quicktime worked for me without any problem on any browser I tested in as you then deal with the native players. So...add this function or replace detect_browser(): function detect_platform(){ var platform = navigator.platform; return platform; }; Load function becomes (just a change in the IF statement to merely detect Windows or assume Mac or something else) function load(media){ media = folder + media; var player = document.getElementById('player'); if (detect_platform() == "Win32"){ player.innerHTML = '

28. Posted By: ypki - - July 29, 2009, 2:00 am

Excellent work...... i have a doubt, What happen when the music player is created and play a music file from server, will the music file is downloaded to the client system or it play from server? If it download to the client system, where it save? If it play from server, will it take more time to load?

29. Posted By: dbrumm - - September 18, 2009, 12:53 pm

Also had a problem with the refresh in IE7 and 8. It happens because the Display Time function is calling once the page is removed. I tried a few null statements like if (typeof (document.getElementById("sound")) !== 'undefined' && document.getElementById("sound") != null) { But still does not work. If you find a solution please let me know. Love the setup just have to solve this problem before I can use it. Thanks,

30. Posted By: Reju Koshy - - September 27, 2009, 11:30 am

To avoid some java script errors in IE add following condition in display_time() finction... if(document.sound){ song_status = document.sound.playState; } if(document.sound){ buffer_status = document.sound.network.bufferingProgress; } if(document.sound){ time = document.sound.controls.currentPositionString; //duration = document.sound.currentMedia.duration; duration = document.sound.currentMedia.durationString; }