Tutorial :Play button in browser


I want to put songs on a web page and have a little play button, like you can see on Last.fm or Pandora. There can be multiple songs listed on the site, and if you start playing a different song with one already playing, it will pause the first track and begin playing the one you just clicked on. I think they use Flash for this, and I could probably implement it in a few hours, but is there already code I could use for this? Maybe just a flash swf file that you stick hidden on a web page with a basic Javascript API that I can use to stream mp3 files?

Also, what about WMA or AAC files? Is there a universal solution that will play these 3 file types?



There are many flash mp3 players that you can use that do this. Usually, you just have to edit a text file to point at the mp3s you want to have available.

Here is the first one that showed up on a google search for flash mp3 player: http://www.flashmp3player.org/demo.html


This is fairly simple if you want to embed the WMP you can use all the controls via JavaScript. There is a great MSDN section on it but I cant seem to find it now.

Edit: I found this on MSDN it contains the properties that an embeded WMP will accept then all you have to do is call the methods via javascript.

<OBJECT id="VIDEO" width="320" height="240"       style="position:absolute; left:0;top:0;"      CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"      type="application/x-oleobject">        <PARAM NAME="URL" VALUE="your file or url">      <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">      <PARAM NAME="AutoStart" VALUE="True">      <PARAM name="uiMode" value="none">      <PARAM name="PlayCount" value="9999">  </OBJECT>  

Then for the javascript

<script type="javascript">  obj = document.getElementById("VIDEO"); //Where video is the id of the object above.  obj.URL="filename"; //You can use this to both start and change the current file.  obj.controls.stop(); //Will stop  obj.controls.Pause(); //Pause  </script>  

Somewhere around here I have code to even control the volume.
A while ago I built a custom (looking) player for a client purely in HTML and JavaScript.


Something I bookmarked long ago, but never got to test so far: http://www.schillmania.com/projects/soundmanager2/


I second superjoe30's suggestion: I had great success with musicplayer. The only (slight) negative is that it's a little older project and not as well skinnable as some of the alternatives (although you have the full source code, so - given some time - you can make it look exactly as you need it to).

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »