Get the updated version here HTML5 Music Player 1.0.1
Remember that awesome music player psd created by Orman Clark? Well here is the matching jQuery plugin. Enjoy 
Usage:
//Initialize the plugin
$('body').ttwMusicPlayer(myPlaylist, {options});
//You can specify the following options in the options object:
{
currencySymbol:'$',
buyText:'BUY',
tracksToShow:5,
autoPlay:false,
ratingCallback:function(index, playlistItem, rating){
//some logic to process the rating, perhaps through an ajax call
}
}
//Build your playlist. The playlist uses the same format s jPlayer (an array of objects. However, this plugin requires you to add some additional parameters. A sample playlist item:
{
mp3:'mix/1.mp3',
oga:'mix/1.ogg',
rating:4.5,
title:'Some song title',
buy:'http://www.codebasehero.com',
price:'0.99',
duration:'4:28',
artist:'Artist Name',
cover:'images/cover.jpg'
}
I love that you built it, but I’m not sure it’s a great idea to have the links to your .mp3 and .ogg files in your markup?
Well, you could hide or obfuscate the links, but I think that would be primarily a server side concern. With the exception of the jPlayer swf used for older browsers, this is all js.
Bravo, good job.
Compliments!!!
Is it possible to hide the buy link?
Yes. For each track you want to hide it for, just make sure you don’t populate the buy property.
thanks, figured it out. Also many thanks for making this a free player
Hi Saleem
Good Job!!!
I’m having problems adding my mp3 files. I cant start playing them.
Is it only supported the ogg files?
Thanks
Thanks!
It works with both mp3 and ogg files. Are you using the correct paths? In general, jPlayer doesn’t like relative urls, so try absolute paths. Also, make sure they are encoded correctly. If neither of those two suggestions solves the issue, check out the jPlayer documentation and it’s google group.
Excellent Job! Is it possible to have a play count function? This would be perfect if we could visually see how many time each track is played.
It’s not a feature, but it would be pretty easy to add a play callback function that logs that info if you’re familiar with js.
Hi This is gr8, i wanted to check if you can guide me how i can hide the direct Mp3 Links, i am using PHP, do guide me please.
Hi. Unfortunately, the items on this site do not come with any support.
tell me how to add a shopping cart with your module thks.
Hi. These freebies don’t come with support. Thanks.
Hi Saleem
Great work.
I was wondering if you could add my company’s logo to it, build in functionality to play related music videos, add a shopping cart module with credit card and PayPal payment, add a library of 1000 albums including rights for all the music and hand over the code to me for free?
Lol.
Sweet!
Is the Lorem Ipsum font Century Gothic?
It’s Lato. You can get it from the google font directory.
http://www.google.com/webfonts/family?family=Lato&subset=latin
Haha, so many folks looking for extras & support on a free product. @Saleem, this is incredible! I can’t believe how well it works. I’m with @srini on figuring some way to secure the files against pirating a little more, but I don’t intend on asking you to hand out that info.
Great music player!
ps. Got this link from @SmashingMag on Twitter FYI
Thanks Gabe!
Perhaps when I have some time, I’ll release an update or a separate server side script that helps to protect against pirating.
Hi Saleem!
My first thought was like: Oh, this looks as great as the ‘Mediabox’ Item on CodeCanyon I’ve bought the other day..and then I realized it’s made by you, actually it’s your website
Thanks for this freebie.
Thanks Kai
i have a huge collection of mp3 in my work area, can i use this to expose them as music player (intranet site) using this? i guess so…
As long as they are on a server it should work..
Nice work. Lookin’ good. Lookin’ very good I might add ! Top work.
Is this code tested on all kind of browsers and platforms ? I recently used another HTML5 player and had numerous probs w/ Safari on Mac.. apparently it has difficulties playing mp3′s..
Too bad the demo uses lo-quality audio (not good for first impression..
)
Unfortunately this is not working on Safari 5…which is strange because regular jplayer works. If I figure out a fix I’ll reply again
I just confirmed it works in Safari 5. Please clear your cache and try again. This uses jPlayer 2.09, while most sites use jPlayer 2.0, which means you probably have the old files in your cache…
Hmm, Safari 5.0.1 on a PC, and using jplayer 2.0.13 included in the download and it’s not working. The demo page here also does not work. I get a pop-up “jPlayer 2.0.13 : id = ‘undefined’ : Error! Attempt to issue media playback commands, while no media url is set. Use setMedia() to set the media URL”
That’s the error from the demo here. On my site, the files are definitely there and works in all other current browsers.
The site in question is http://pornojumpstart.com/music
I realize there’s no support included in a free item, and I’m not requesting anything. It’s a great plugin and looks awesome. Thanks
I am dumping my flash player for this. I am remodeling my whole site around this player. Thank you Saleem for the freebie.
I have most of it figured out but am having trouble with positioning the player on my page.. Anyone have some advice?
Any particular reason you’re not using a html5 doctype on your html5 music player demo?
Nope. Didn’t even realize that I wasn’t. I just used the doctype my ide defaults to. Thanks for the heads up.
The plugin looks good, but I would like to see a live site using it. Are there any websites that I can go to to view it in action?
Not sure…I just posted it a couple of days ago. I would be interested in seeing that as well.
I have it running over at http://jessegander.com
Is there a flash fallback for earlier browsers?
Yes. It’s based on jPlayer.
Great work Saleem. I was trying your demo and got this error popped while playing the music:
http://imageshack.us/photo/my-images/607/screenshot20110618at955.png/
After I clicked OK, another one popped up:
http://imageshack.us/photo/my-images/696/screenshot20110618at955.png/
Not sure if it’s a browser related, but I’m using FF4 on mac.
Good luck mate and thanks again for the good one.
Hi. Please clear your cache and try again. Thanks.
Bravo– Love this! Great job! Awesome to see how far HTML5 is coming along.
It could use some work though. Volume?
It’s based on the PSD created by Orman Clark, which is a work of art as far as I’m concerned.
Anyway, the un-minified commented source is included with the download. Feel free to add volume if you require it.
Hi there, great work! I’ll try and integrate it to my site…Is there any easy ways to replace the “buy” function by a “download” function at all?
Thx
Set the buy text option = ‘Download’, the currency symbol option = ”, and set the buy link option on each song to the url of the mp3 or the script that initiates the download.
Dear Saleem,
this is a great work. Is there chance that you tell me where I can find the US Dollar symbol and change it to a EUR symbol ?
Thanks in advance & best regards
Michael
You can set the currency symbol in the options object. Please see the included instructions for more info.
Amazing freebie. Without messing with too much of your original code, is where a setting where I can turn off the ratings of the songs? Thank you!
The easiest thing to do would be to hide the rating elements via css.
That is what I ended up doing. Thank you so much for this again!
The player won’t load for me on Opera for MAC. works fine on safari, firefox and chrome for MAC. Anyone else run into this problem? Here’s a screenshot
https://skitch.com/cardeo/fgpe2/jesse-gander
I’m having the same issue with Internet Explorer. Anyone else run into this?
I have the same problem! Anyone who knows how to fix this? Or is it impossible?
Unfortunately I haven’t tested it on a mac. Are you getting an error? Can you email me via the contact page on this site with the details so I can look into it? Thanks.
Is it possible to make the songs play only once? Rather than have them repeat or cycle through the entire list?
Does the playlist repeat? I don’t remember. If so, you would need to modify the code, I don’t believe I added a setting for that. I’ll add it in the next version.
Is it possible to set a time limit for previewing an audio file. For example: if the duration is 4:21 can you have it only play the first 45 seconds?
No. This is not an option. It would be relatively easy to change the code if you’re familiar with js. If not, your best bet is to just truncate the actual mp3 file to the length you want.
I’m having a problem in Firefox, the songs just don’t play.
Anybody who cold help me figure out what the problem is?
Here’s the URL:
http://www.marcusfriberg.com/pasadena/listen.html
Your server is more than likely sending the incorrect mime types for ogg/oga files which will prevent the media files from playing in firefox. This is pretty common actually. You will need to add the following to your htaccess file to fix it:
AddType audio/ogg ogg
AddType audio/ogg oga
AddType video/ogg ogv
Thank you so much! This fixed my firefox issues.
I’m pretty sure you’re having a different issue Marcus. See my note below.
The player doesn’t work with IE7, IE8
But it work on IE9.
Have you any issue for IE7 or IE8?
Thanks
Baker
I have this problem too. mp3 not played in firefox and in opera. But in chrome all is good. On my server installed nginix
Can you help me please?
Sorry for my english…
Hi. Please see my previous comment about servers sending incorrect mime types for ogg files. There is an htaccess fix in that comment as well.
I have this error in firefox, opera:
jPlayer 2.0.13 : id=’jp_jplayer_0′ : Error!
It is not possible to play any media format provided in setMedia() on this browser using your current options.
Video or audio formats defined in the supplied option are missing.
Context: {supplied:’mp3, oga’}
Hi. If you’re not supplying both mp3s and ogg files, you will need to change the default supplied value accordingly. I.e. supplied:’mp3′
I hid all the .mp3s
http://tm11.me/imoplayer
How?
Hey guys, i seem to also be having the same issue, in IE8 it seems to load but not no playlist listed. I had emailed you in the past in which you said it worked fine but since have had no reply to my email. Below is a screencap http://i53.tinypic.com/dq0hsi.jpg
It seems an issue with someething failing to kick in? I tested your other players at codecanyon and they work fine. Seems an issue with some code?
Yes. I’m aware, check back in a couple of days for a fix.
Is anyone else having problems with the test file playing midway, but showing the progress bar as fully played, and then restarting? It happens in Firefox, but not Safari.
Hi Saleem
Good Job!!!
I’m having problems adding my mp3 files. I cant start playing them.
I’m using the correct and the absolute path! My MP3 collection are
correctly encoded!
It works only with ogg files.
Can you Help me Please!
Thanks
Hi. I’m not sure what the issue is, and unfortunately I’m not able to offer support for these freebies.
hey guys.
noticed that in ie version 7 and 8 dont work. do you have any idea if you will make an improvement on that side? great player though. keep up the exellent work.
Yes, I’m aware. I will probably release a fix sometime soon.
http://www.codebasehero.com/2011/07/html5-music-player-updated/
I still think this is an amazing freebie and should be accompanied by a donate button for people whose lives you made slightly easier and want to repay.
Hi, how do you have it to autoplay. cause i change the autoplay function in index.html from “false” Statement to “true” but it’s still not auto starting when the page refresh.
It’s true that was the first thing that i try, but don’t work
Thanks for the player, a solution for IE?
Thank you.
I buy to day the MediaBox sure to test it soon need assistance.
apologies works perfect in IE9
Sorry to be a pain, any idea when we might see the new code? Seems i have found a work around, seems http://pornojumpstart.com/music coded the player as 2 seperate players one for safari which seems to work for ie. ive purchased one of your other scripts and it works fine, i just need this one for a particular area on the site.
Thanks
I have been working with this on a CR-48 ChromeBook (ChromeOS based Netbook). Anyway I have been working with the playlists on one of my web servers, but I want to have the playlist access files on my local storage on the CromeBook. Namely the MicroSD card in its slot. In Chrome’s API it appears as “External Storage/RandomNumber/MP3′s/” I have tried everything from File:///External Storage/…. \\External Storage… //External Storage… But nothing seems to work. Am I missing something? Since there are no drive letters and they are simply mount points on the O.S. it makes access difficult under the best situations. Has anyone got it to work with this type of device and locally hosted MP3s?
-Thanks.
Nevermind. I found if I copied the files all locally on my External Storage (MicroSDHC) device, I could put the paths to the MP3′s in the playlist.js file and they worked perfectly using File://media/RandomNumber/MP3…
- I can now manage my library and totally use this CromeBook as an offline music player with workable playlists! Now I just need to build a Playlist file builder that will allow me to click on files an have it auto-generate the code needed in the playlist.js file.
Can someone tell me which file to edit in order to change the placement on a page.
Figured it out after playing a bit. Thanks for the project!
Hi, i like your player very much.
Is it possible to initialize the player in a div rather than in the body ?
If i use $(‘.Player’).ttwMusicPlayer(myPlaylist, {autoPlay:false,}); to initialize, no player and no playlist will appear …
i created a div with id or class=”Player” inside the body, but the script seems to link to body only …
Any help would be appreciated.
I want the player to fit into my website layout – but inside the body, the player keeps centering to the page …
Thanks a lot in advance and for you sharing your code.
regards
zilch
you can use iframe
Hello Saleem,
Could you give me istructions how to add jPlayer’s volumechange to this ttw music player?
-Mikko
Sorry. There is no support for these plugins.
@zilch
You may want to try and use an “id” along with your “class”.
Ex:
$(‘#playerContainer .Player’).ttwMusicPlayer(myPlaylist, {autoPlay:false,});
It’s worth a shot, I used this technique on a jQuery plugin and it worked.
Cheers
Seriously, I do not see the media player in the source code…how do you get it to show????!!!
I don’t understand the question. The source code is the media player….
@Nomad
thanks for your reply. i thought that i tried it exactly your way …
guess i screwed someting up … it is working as you wrote.
thank you
hi guys.
perfect thanks for this update.
if i have already the player installed and i’ve changed a few things what is the file or code that i should be replacing to make it work on ie7 and ie8. that saves me from editing it all over again.
thanks again
good job.
I have this implemented, and everything looks great. The player is showing up with the background and everything, but the playlist js file won’t populate any tracks or album covers. I checked all the file paths and they’re all correct. Anyone have any thoughts?
Great job!
how do a get the artist name to show beside the song name in the list
For those that are having trouble with getting the player to work on iOS i was able to fix it with by moving around the order of the solution in the jPlayer settings, it appears that flash was loading first:
jPlayer:{swfPath:'../plugin/jquery-jplayer',
solution:'html, flash'
}
hello, I have a little trouble, the autoplay function does not work on the player, someone had the same problem?
Great work Saleem and thanks for the share.
Anyone figure out how to stop the playlist from looping (ie when the player gets to the last song, it just starts again from the first)
You will need to modify the playlistNext function in the plugin.
Even better would be to just modify the event handler that calls playlist next.
Untested
$myJplayer.bind($.jPlayer.event.ended, function(event) {if(current + 1 < myPlaylist.length)
playlistNext();
});
Hi Saleem
amazaing plugin by the way.. Im having a hard time making it work in safari 5 and ie 8.. can u have some tips on how?? really much appreciated.. thanks a lot!!
Perfect, thanks again Saleem – great plugin!
First, thanks for your work.
I am implementing the player in a website, but I hide or show it by pressing a button. I tried to put it inside a div and hide the property toogle does not work.
Can you help?
nothigns, it`s works. Thank you
How do add more songs to my playlist?
Seem not work on firefox with only .mp3 format! We must create 2 format include mp3 and ogg in one folder right ?
Yes, firefox does not support mp3 natively.
Thank you for sharing this great player Saleem, I love it!
Would anyone know how to hide the playlist so we would see only the top part of the player before the description?
Hi there !
After couple of hours I’ve found solution for AUTOPLAY your music.
All you need is… set the autoPlay parameter to 1 (not ‘true’ as many of us thought).
)
If you set to 1 (what in JS should be probably the same the true parameter is
Best regards,
Godzio
For set volume for example 0.5 you have to write one line:
volume: 0.8,
or:
volume: 0.8
in jPlayerDeafults function (ttw-music-player.js) or add this line in your html code (in head script where autoplay is.
Make sure you correct end the line.
Does the font make a difference in the coding im new to this and dont know if it well does? Can i just change it to avoid it not working?
No difference, just comment it out.
Thanks! This is a great player. I am going to use it for some promo music on my homepage. But I’d like to talk to you about commercial development as well. I just put up a beta signup page last week and already have over 300 signups. I already have a library of over 1000 songs form the last iteration of the site. What is your availability like?
Hello,
Great plugin. One issue I’m having with my installation and the demo itself is that autoPlay:true isn’t working for me. Anyone else have this experience? I’ve changed it both in the js call and the js file default settings. Any insight would be greatly appreciated!
-Bill
Anybody have any luck w/ autoPlay? I’ve tried setting it to “true” as well as “1″ as suggested. Neither works
Thanks for sharing, I really like your HTML5 player, but I have one problem,
the error console always tells me, that ‘Audio. Pause’ is not a function and the audio doesn’t play, and I can’t find out, what the problem is.
I copied the code from “The Box”, where all worked fine, but in my own script it doesn’t.
Maybe you could help me to figure out what’s wrong in my code. The player works fine in Safari 5.0.1 as far as I can see.
Any idea how to autoPlay? I tried the one suggested above but still it does not work.. Thank you..
I figured out the autoplay issue. check the ttw-music-player.js (or ttw-music-player-min.js) file. Certain instances of autoPlay are not camel-case. Make sure all are camel-case (or all are lowercase). the mismatch is what’s causing it to fail.
Thanks Bill. I will publish an updated version with your fix when I have some free time.
Hey Bill, I’m the one who actually figured it out.
-C-dog
Thanks Bill Higgins, I checked but all instances of autoPlay in using the right case. Can you please be specific and give me a sample line.
Thank you very much…
There are indeed instances in the code where I do not use camel case. You should be able to fix the issue by replacing line 163:
playlistInit(options.autoplay);change to
playlistInit(options.autoPlay);I haven’t tested this though, I just did a quick scan of the code…
Thanks Saleem great work, one more question, I would like to add other elements of the music, like how many times a song was played. In ttw-music-player.js, under cssSelector I added this line:
views: ‘.views’ // I even updated myplaylist and add views value.
I also updated ttw-music-player-min.js by adding the line views: ‘.views’
But unfortunately it does not work, any ideas for this?
Thank you again!
Hey (-:
I would like to take the player for Streaming.
Is it possible dynamically change the Artist & Song?
THX + a nice day,
Dennis
Hi Saleem,
Amazing plugin by the way..
by the wayim having a hardtime making this work IE8 and Safari 5.. could you provide me with some tips and how??
Thanks!!!
Hi, nice player! I have a question:
How can i make to rating work`s with php?
Amazing.
Thank you soo much!
Used at http://www.dangriffin.ca
Hey, I really like this player but I’m having one issue. When I open it in Chrome (version 16) the files wont play. I don’t see any errors in the console. If I open the same page in Incognito mode it runs without a problem. I have modified the .htaccess file already and that didn’t seem to do anything. I don’t have this problem in FF or IE. Any thoughts on what could be going on?
Thanks.
same here, help
Love the player!! Cannot get it to auto play nor have a seen any example of it auto playing…Can you help?
This is an awesome Music Player.
Anyone out there know how to add more tracks to the playlist.
add/modify in the “myplaylist.js” some thing like this:
{
mp3:’mix/04 Coleraine.mp3′,
oga:’mix/04_Coleraine.ogg’,
title:’Coleraine’,
artist:’Monika Schaefer’,
rating:4,
duration:’0:30′,
cover:’mix/03monika2.jpg’
},
Found out how to add tracks.
Just having problems positioning the player.
Can anyone help.
Keep the index file that came with the demo, rename it, then on the page you want the player, use the tag. check out the site I just did, works like a charm.
I found out that if I did not put the ogg files, it would not play on firefox.
thanks for the script.
I also found it tough to make a markup for html to place it in a div.
Used a iframe technic to work around.
Hi
really nice. But i can’t add more songs to the playlist. It’s only one song possible. If i try to add more, the whole player isn’t displayed in the browser. Please can anybody help me?
You’re probably defining your playlist array incorrectly. Many people forget that there must be commas between each item in the array. Please check your console for errors. You can look at the source of the demo if you need to see an example playlist.
Hello
Congrat:)
Please anybody help me.
How can i build a playlist?
Anybody can to send me a sample code wher are more data not only one song.
many Many thanks:)
Botor
Playlists are just javascript arrays….There should be a sample in the readme included with the download. If there isn’t, you could always look at the source of the demo page.
This plugin kicks ass!!! But as noted by a few others, what controls its positioning, by chance for me it appears exactly where I want it but if I wanted it somewhere else… Ive scoured the code, but cant find whats controlling it… little help?!? is there a way to tag a cell in your html and have the player appear there?
Thanks
The positioning is controlled by the anchor, which is just the html element you initialize the player on. For example, if you init the player using $(‘#myDiv’).ttwMusicPlayer, the player will be positioned wherever the #myDiv is located on the page.
ME GUSTA
It wont play *.mp3 of bigger size from my server. The file size is over 20mb’s. It will play, the example 1.mp3 song but nothing else i put on the server and give the path to it. Help?
Hello, thanks for amazing player, i have a question tho, when i place the script in a div it doesnt act in any way. How do place this player to a certain area?
Thanks
Dope player! I love that it works on iPhones.
Does this work with WordPress? If yes, I’ve uploaded it into my plugins folder and nothing, doesn’t show up in WP Plugins module…what did I do wrong?
Thanks!
)
It’s not a wordpress plugin…
Hi All,
does anyone know how I can have the player start at a particular track? Let’s say track 3, skipping track 1 and 2?
Thanks
Can anyone tell me how do I get more than one player to work on a page? I made it so that it loads in a div, but that didn’t help.
Hello, thanks for amazing player!
I can’t figure out how to use the ratingCallback.
Is there an example anywhere?