in JavaScript, Media Player |

JavaScript media player

Download JavaScript Media PlayerA while back I was impressed to see the Yahoo Media Player, which can be used to stream mp3s on a website. It appeared on the face of it to be a JavaScript only browser media player, which seemed not only impressive, but impossible. As it turned out, the media player actually used flash underneath the hood by making a series of API calls without the need for the typical flash UI.

Being suitably impressed I decided to write my own – I wanted several distinct features like a playlist and a custom look. I then found an astonishing good JavaScript API that interfaced to the audio features in Flash. This library was called SoundManager2, check it out, it’s great. SoundManager does provide some neat demo applications, but nothing that matched my needs – incidentally the demos may be far better now as I wrote this code almost a year ago.

So what was I looking to achieve with this:

  1. I wanted to queue tracks in a playlist;
  2. The order of the playlist must be dynamic, i.e. you can drag and drop the tracks to change their order;
  3. Adding the media player to a website is as easy as adding a div with a specific id attribute;
  4. Adding items to a playlist must be as simple as including an anchor tag with a specific CSS class;
  5. The colours, dimensions, and images should be easily overridable but also have sensible defaults;
  6. The path to the library should be configurable in some manner.

So what did this turn out like? Well you can see it in action on www.feellikefalling.com. I encourage you to check it out to see things like the play list drag and drop etc in action. Update: I have embedded the player here so that you don’t need to navigate away if you don’t want to.

So if you want to include this on your website how to you do it? It’s pretty easy – you don’t need to be a web developer! First you need to download all the required files by clicking the big button above or here, extract the files, and then upload the these files to your web server. The HTML required to embed the player is minimal and is show below:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="myplayer"> 
  <a class="myplayer_mp3" href="song1.mp3" 
     title = "Feel Like Falling - Can't Rock With The Kids">
      <span class="myplayer_artist">Feel Like Falling</span> - 
      <span class="myplayer_song">Can't Rock With The Kids</span>
  </a>
  <a class="myplayer_mp3" href="song2.mp3"
     title = "Feel Like Falling - Purple T">
      <span class="myplayer_artist">Feel Like Falling</span> -
      <span class="myplayer_song">Purple T</span>
  </a>
</div>

To include the website media player in the page you simply add a div element with id myplayer. Then to add an mp3 to the playlist you create an anchor (a) tag with class myplayer_mp3. To include a tooltip for the song you simply add a title attribute to the a element. So what we are doing is creating a playlist from a series of urls specified in the a tags, it’s as simple as that.

In order to get all this to work you need to include the following in your document header:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<link rel="stylesheet" type="text/css" href="js/myplayer/player.css">
 
<!--You must specify the location, relative to this file, where
    the myplayer source can be found. This allows it to set up
    some things automatically for you -->
<script type="text/javascript" charset="utf-8">
  var _MyPlayerLocation_ = "js/myplayer";
 </script>
 
<!-- It uses jQuery so load the main jQuery library however 
     you wish in this case I'm using Google to host it -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
 </script>
 
<!--The rest are JavaScript file that are required by the media
    player and should be included in the order specified - they 
    are all contained in the downloadable zip file. All you have 
    to do is make sure you have specified the correct path
    relative to this file -->
 <script type="text/javascript"
          src="js/myplayer/jquery/jquery-ui-custom.min.js"></script>
 <script type="text/javascript"
          src="js/myplayer/jquery/jquery.tooltip.js"></script>        
 <script type="text/javascript"
          src="js/myplayer/soundmanager/soundmanager2-min.js"></script>
 <script type="text/javascript"
          src="js/myplayer/utils.js"></script>
 <script type="text/javascript"
          src="js/myplayer/myplayer.min.js"></script>

Instead of explaining all of the above I suggest you just take a look at the inline comments. There is also a sample HTML file in the downloadable zip containing full working example – apart from the actual mp3 sound files.

You can also customise the player visually with relative ease. The colour scheme can be changed by simply overriding the default CSS styles for the player. For example, consider the following screenshot:

Customised Media Player

Here the volume bars, the play timer, the currently playing song background, and main background colour have all been changed. The code below shows the CSS elements that had to be changed/created to achieve this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div#myplayer { background-color: #696969; height: 25em; }
 
#myplayer_playlist_container { height: 20em; }
 
div#myplayer_playing_timer { background-color: #6D0D33; }
 
div.myplayer_strip_skin_on { background-color: #6D0D33; }
 
#myplayer_playlist li { background-color: #929292; color: #FFFFFF; }
 
a.myplayer_mp3 { color: #000000;	}
 
#myplayer_playlist li.ui-selected { background-color: #6D0D33; }
 
#myplayer_playlist li.ui-selected a { color: #FFFFFF; }

Hopefully the method of skinning the player, as shown above, is straightforward to understand, it’s just basic CSS. Obviously just about anything can be customised through the use of CSS, and I suggest taking a look at the generated HTML to identify the appropriate ids and classes – you can use firebug HTML explorer with Firefox (or the equivalent in IE, Chrome, Safari, etc). In fact, the HTML generated can also be modified easily – take a look at the myplayer_snippets.js to do this. Be aware though that some of the elements generated are essential to the working of the application though.

For those more artistically inclined than me feel free to give it a sweeping new skin – in the colours of the site I linked to so that I can get the benefits 😉

It goes without saying there will be bugs! If you find any, either leave a comment or better still email me – my address can be found in the about section of this site.

So feel free to add the webpage media player to your site! Enjoy.Download JavaScript Media Player

Published

Write a Comment

Comment

22 Comments

  1. Hi,

    Thanks for the brilliant media player. Just building my first site and can’t get the scroll bar to change colour, any ideas ?

    Iain

  2. Hi Iain, thanks for the comment. The scroll bar colour can only be changed in IE – if I remember correctly. Changing it is not supported in Firefox or Chrome. However, if you are happy for the coloured scroll bar just to display in IE then you need to override (or update) the CSS style for #myplayer_player_container. To do this you either add something like below to your CSS file and change the colours to the ones you would like:


    #myplayer_playlist_container {
    scrollbar-highlight-color: #272525;
    scrollbar-3dlight-color: #272525;
    scrollbar-shadow-color: #272525;
    scrollbar-darkshadow-color: #272525;
    scrollbar-track-color: #272525;
    scrollbar-arrow-color: #272525;
    }

    Or, you search through the CSS file that is included with the files you downloaded from my site (it can be found in myplayer/player.css). You can then search for the word “scrollbar” in the file, where you will find a set of lines that look similar to that above. You can then change the colour values to the values that you require.

    Alternatively if you just want to stop the scroll bars from displaying then you can just change the height attribute of the above style to make it big enough to accommodate all your tracks.

    Hope this helps.

  3. Thanks – in fact I was having a dumb (and tired) moment, forgot to spell color the American way…duh! You;re right of course, this only works in IE so far as I know.

    My new challenge is to get the player to play the first song automatically when the page launches; if you have any pointers on that I’d appreciate it.

    I Love the band, also. If you’re ever gigging in the north east of England, please do let us know!

  4. To get the song to play first I think the best way would be to just add a little bit of JavaScript that find the first track and send a click event to it. Maybe something like:

    $('.myplayer_mp3').click();

    You would probably have to add this to the function whenInitComplete (line 608) in the file myplayer/myplayer.js. The code for this function would then look something like:

    function whenInitComplete()
    {
    // Wait for both the auto layout to have finished and
    // the soundManager has loaded before we setup the
    // player
    toComplete--;
    if(toComplete == 0) {
    var myPlayer = new MyPlayer();
    myPlayer.init();
    $('.myplayer_mp3').click();
    }
    }

    I’m not 100% sure this would work but you can give it a try. I should probably have created a better way to hooking in this functionality but I never really thought about it at the time. One for the future I think!

  6. I am trying to implement some extra features, like Iain was. The context is that this player will play MP3s for Source engine mods (video games based off of Half-Life 2’s technology) in the background. The user cannot immediately see the controller so the script’s PHP and Javascript needs to do some things on the user’s behalf.

    1. I need the script to automatically play when it loads. I followed your advice to Iain, but adding $(‘.myplayer_mp3’).click() as described does not work in Chrome nor IE. Can you suggest a better way?

    2. I need to be able to set the playback volume on load by passing a variable into Javascript via PHP sort of like how the _MyPlayerLocation_ variable is passed. Value can be passed as percentage from max out of 100 or whatever is appropriate. Because of how your volume meter works, this might be tricky to do without breaking the meter. If this is an issue, then it would be okay to change the volume without updating the volume meter, as in most contexts the user cannot see the interface.

    3. I need to be able to define the starting position of the first track before playback begins, passing a variable like described about. The value can be passed as the number of milliseconds into the track or whatever is appropriate.

    I know that the SoundManager2 API supports these things, but I know very little of JavaScript and have a hard time figuring out how to modify your code to achieve these things. FYI, since the user will indeed see the interface when loaded from an alternate website-based system, so I’d like to retain the integrity and usability of your interface after applying these things.

    Also, a couple comments about your program:
    – There is a small glitch that prevents the user from dragging the track position slider all the way to the end of the song. It seems the art for the slider object, which enlarges when selected, prevents it from going all the way to the end.
    – I would prefer more finite, variable control of the volume over rigid interval selections. That’s my personal preference, though.

    I very much appreciate your help with all my questions. Thanks for this great plugin!

  7. Hi SirLamer,

    I’ve been having a look over the things that you were looking for tonight, and I think that I should be able to implement at least the first two pretty quickly – I’ve actually got most of it done. I’ve not had a change to look at your third point yet but I’ll look into it more tomorrow.

    On your first point though, I had a quick try and it seems to me that the $(’.myplayer_mp3′).click() does play a track, however it plays the last track on the list! Anyway, if you want to wait until tomorrow, I’ll release something that allows you to specify a css class that selects the first song to play, and you can see if it works from there.

    To address your second point would, as you suggested, break the current UI for the player. However, I’ve created something that sets the volume you specify regardless – it will however set you to the nearest increment the first time you click the plus or minus buttons.

    I’ll post an updated version of the plugin that addresses some of the things that you were looking for tomorrow.

    Anyway, thanks for using and commenting, and check back soon.

  8. For those looking for the ability to select a song to auto play on load, and set volume of the first song at start up, then I have created another version of the media player. This can be downloaded from HERE.

    At the moment I have not got round to including the ability to set the position of the song on the first track but I will hopefully get to this at some point soon.

    For those who want to enable these new features then you need, first to download the file from the link above, then to add the following code to a script tag in your html file – this replaces the code shown in line 7 above, i.e. this replaces the old variable _MyPlayerLocation_ :

    var _MyPlayerSettings_ = {
    location: "myplayer",
    startTrackClass: "play_me_first",
    startVolume: 19
    };

    If in doubt what to do just check the included index.html file.

    I’ll write a more detailed description of this on a blog post soon but I just wanted to get this stuff out there to those who need it.

  9. @Gregg

    Wow, thank you very much for this!

    I have tested this new version and it works great! Unfortunately, I tested it in the unique platform I hoped to use it and it’s not going to work there. It’s at no fault of your own; it seems the in-game web browser in Team Fortress 2 and other Source engine games doesn’t support JavaScript. I’m surprised, since they do support Flash applications! Very well, then…

    So, I’m sorry I cannot put it to use like I hoped. I’ll keep an eye on things, though, and if they ever add JavaScript support I’ll put your great program to use.

  10. I’ve modified the player to track play counts and to load the player with tracks in ascending play count order. Each track’s play count is incremented at the completion of that track’s play. The player and mp3’s are currently on a flash drive yet through some clever mechanisms the flash drive communicates with a PHP/MySQL complex on a server. It is remote complex that records the play counts after each track play and that provides the play order to the player when it is enabled (or refreshed). I’m currently running a single play list but choosing one from among many playlists will be implemented as will combining playlists. Eventually I’ll put all the mp3 tracks on a web server too and the player also. Unless Apples does the right thing with the its buy-out and closing of Lala.com this will be my day-to-day media player. My site will not be public but I will gladly share the configurations that I have implemented to anyone…its basically a combination of Ajax and \pseudo-Ajax\, the latter being requesting images whose url contains the data to be communicated in its query string. An .hta file is used as well. The .hta gets the server play order and writes it to a local .js file which other javascript uses to populate the players play options (tracks). Functionally integrating HTA files and Ajax technology (http requests of any form, really) enable communication between the local file system and a remote server.

  11. Hi James. Sounds really cool what you have done with this. Glad you have found some good use for it. I was hoping that others would fine some great ways to extend it.

  12. Hi. This is a great, easy player: so thank you for making and releasing it. I was wondering if you could help me with something, however. Instead of linking to the files directly, I am accessing them dynamically through a PHP file, like this:

    http://www.domain.com/file.php?id=3

    When I do this, the files play, but with two problems:

    1. The time limit doesn’t show correctly until the whole file has loaded.
    2. When switching between tracks, either by clicking on different tracks directly or by clicking the next button, the player seems to wait until it has finished downloading all previous tracks and then it plays the selected track, which results in a significant delay.

    I have tried various ways of delivering the audio directly to the player, but none of them seem to work. I can post the code that I am using if you would like, but I was hoping there might be some minor change that you can make to the JS that would help me out.

    Thanks in advance,
    Chris

  13. > 1. The time limit doesn’t show correctly until the whole
    >file has loaded.

    I’m afraid this is the way it is. Until the file has loaded it can only make an estimate as to the time. This may have changed since I worked on this but it was a limitation of flash – and I can only assume the mp3 format.

    >2. When switching between tracks, either by clicking on different
    >tracks directly or by clicking the next button, the player seems
    >to wait until it has finished downloading all previous tracks and
    >then it plays the selected track, which results in a significant delay.

    Not sure what the problem is here. I’ve tried this on my own site that uses the player and I can’t reproduce the problem. Can you let me know which browser and version you are using so that I can try it out? Feel free to email me a link to your site if it’s publicly available and I can see if I see the problem, details of my email address is in the about me page.

  14. Tks Gregg for your work , I’m trying your player. But when I click on track or on play / pause, the page refresh and player go to top of page, it’s possible see here in your demo, position scroll of page to player align to center of page, when you click it’s go to top. It’s possible disable this ? , when I click player continue in actual position ? Thanks for help, best regards, Andre From Brazil , sorry bad english.

  16. Hi Andre, I’m not sure if you are using the latest version of the player or not? Unfortunately I never published its existence very well so it is likely that you are not.

    Anyway to your problem. I could reproduce the issues you were seeing when I clicked on the play/pause button of the player on this page. However, I think I’ve been able to fix it.

    I’m not sure if you were on the latest version of the code as described in a previous comment. If not then you may have to make a few (small) changes to your page to use the fix I have uploaded as it uses a slightly different way of initialising the player. Instructions on where to download the update and the steps you will need to go through are given below.

    First, download the latest version from this link, replacing your existing files. If you are using the version posted in the previous comment then you are done. Otherwise if you have been using the older version (that is, if you clicked the big download buttons) you will have a line in your HTML that look something like:

    var _MyPlayerLocation_ = "js/myplayer";

    This needs to be replaced with the following (where location matches the location you supplied above):


    var _MyPlayerSettings_ = {
    location: "js/myplayer",
    startTrackClass: "play_me_first",
    startVolume: 19
    };

    There are obviously a few new settings here, you can ignore if you want – simply delete the lines with “startTrackClass” and “startVolume” or comment them out.

    Hopefully this will sort the issues you had with the player. Thanks for commenting and trying it out. Hope the fix works.

  17. Hi Gregg, thankyou for your support. I change to latest version 1.02 and it fix the problem, working fine , congratulations of your work to make it better ..

    best regards,

    Andre Matos from Brazil

  18. Hi,

    Thanks for such a great player! I really like the playlist feature, is tricky if existent in yahoo media player. Yours is quite complex in how much it can do, but also very easy to customize. Kudos!

    I’m wondering if there is way to have several playlist boxes on one page, such as if I am demo’ing sample songs from two different bands and want them clumped each in their own box, per band.

    When I code it as two different div’s, the JS still automatically takes the second list of song links and puts them into the first playlist.

    [Showing example for now at: http://jazzman.ipsumwebdesign.com/demos/ . Source code shows that there are two “myplayer” div’s.]

    Thoughts or workarounds? Thanks very much!
    -Catherine

  19. Hey gregg, nice job dude..
    can u convert this into the java tools for Chrome Browser?
    It would be great if u can..
    my office pc is sucks..
    no Winamp, no media player and i cant install anything inside this pc.. T_T

  20. sir i have downloaded your player “myplayer.zip” but there is a file name is “myplayer_snippets.js” in which a error is showing “Syntax error on line no 3 ” plz help sir..

    thanking with
    sujay

  21. I already use an HTML5/flash fallback player for my playlist (jPlayer). I’m trying to replace my flash-dependent Anarchy Player on my site (www.susiechan.com) for my single MP3s. I’m working with Soundmanager2’s Page-player, but it has no volume slider or bar (you can see my demos here: http://testsoundmanager2players.blogspot.com/)

    Can you develop a volume controller for this player (Muxtype-style Page-Player from Soundmanager2 here: http://www.schillmania.com/projects/soundmanager2/demo/page-player/)? A lot of us all over the internet would be willing to buy it even.

  22. Hello Gregg, after reading your article “JavaScript Media Player” I tried to implement your code … However, I am having some problems, especially with the files .Js and I can not get the system working.
    I’ve had the opportunity to search the Internet for the javascript files … and they all have a version number … and I do not know what was the version that you use you to develop your “media player” ….
    Did you can provide me your code?

    I appreciate your availability.

    AF