Building a Custom HTML5 Audio Player with jQuery

Written by Ben on 02.09.2010

We recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

Here’s the player interface, and the markup for it.

1
2
3
4
5
6
7
8

As you can see, we have a few span elements for each component of the interface:

playtoggle is the play/pause toggle button.
gutter is the timeline track
loading is the bar indicating the loading or buffering progress
handle is the circular element that serves as the playhead, indicating current position in the audio file, and also acting as a drag handle to move to a different point of the audio
timeleft is the play time remaining, in minutes and seconds

We won’t cover the CSS for the player here, but if you want to see how it’s styled you can inspect the styles on the live site.

We’re going to use jQuery to detect support for HTML5 audio, and if it’s supported, we’ll insert the audio player markup and the audio tag itself. This means that browsers that don’t have HTML5 audio support won’t see an audio player interface they can’t use. You could optionally fall back to a Flash based player, but as Tim is already providing a direct link to the MP3 file elsewhere on the page, the audio player is seen as progressive experience enrichment here.

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

if(!!document.createElement('audio').canPlayType) {

var player = ' ... \
<audio>\
<source src="/path/to/episode1.ogg" type="audio/ogg"></source>\
<source src="/path/to/episode1.mp3" type="audio/mpeg"></source>\
<source src="/path/to/episode1.wav" type="audio/x-wav"></source>\
</audio>';

$(player).insertAfter("#listen .photo");

}

The detection code on line 1 is taken from a guide to feature detection on the superb Dive Into HTML5 site. If support is detected, we go right ahead and insert the player code (abridged at the “…” in this code), and the audio tag.

Your audio tag should contain three source formats. The first is OGG Audio which is an open standard, supported by Firefox and Chrome. The second is our old friend MPEG-1 layer 3 (MP3) which is a commercial proprietary format supported by Safari. The third is a plain old WAVE file, which is what Opera wants to hear. Browsers will attempt to use sources in markup order, so for example Safari would fail to read the OGG format source, and use the MP3 source instead, while Opera will fail on the first two sources and use the third WAVE source.

Now we need to start adding functionality to our player:

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

audio = $('.player audio').get(0);
loadingIndicator = $('.player #loading');
positionIndicator = $('.player #handle');
timeleft = $('.player #timeleft');

if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
$(audio).bind('progress', function() {
var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
loadingIndicator.css({width: loaded + '%'});
});
}
else {
loadingIndicator.remove();
}

We first save variable references to several key elements of our player so that we can refer to them quickly without querying the DOM each time.

We then look for support of the buffered property on our audio tag. This should contain information about how much of the audio file has been buffered. At the time of writing, Firefox doesn’t provide the buffered property at all, while Opera has the property but doesn’t put anything in it. For browsers that do (and for future versions of Firefox and Opera that have full support for the buffered property), we set up an event handler for the ‘progress’ event (fired as loading progress is made). As the audio file loads, we calculate the amount of the file that has been loaded as a percentage, and then use this value for the width of our loading indicator. If buffered progress support isn’t available, we can simply remove the redundant loading indicator element from the DOM.

Now we’ll write an event handler for the ‘timeupdate’ event, which is fired whenever the current play time is updated, either as we’re playing the audio normally, or when we seek to a new position within the audio file.

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

$(audio).bind('timeupdate', function() {

var rem = parseInt(audio.duration - audio.currentTime, 10),
pos = (audio.currentTime / audio.duration) * 100,
mins = Math.floor(rem/60,10),
secs = rem - mins*60;

timeleft.text('-' + mins + ':' + (secs > 9 ? secs : '0' + secs));
if (!manualSeek) { positionIndicator.css({left: pos + '%'}); }
if (!loaded) {
loaded = true;

$('.player #gutter').slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: audio.duration,
animate: true,
slide: function() {
manualSeek = true;
},
stop:function(e,ui) {
manualSeek = false;
audio.currentTime = ui.value;
}
});
}

});

First we calculate the play time remaining (in seconds), the position of the playhead as a percentage of total duration, and the minutes and seconds remaining.

We then update the displayed time remaining in the player interface, taking care to insert a leading 0 if necessary to the seconds figure.

If we haven’t triggered this event by manually seeking (determined a bit further on in the code), we move the playhead position indicator along the gutter track. This basically just slides the indicator along as we listen, unless we’re using the slider mechanism to move the playing position, in which case we don’t want to interfere with the position of the indicator because the slider code will handle that for us.

Until the audio has started to load, the duration of the audio file is not available. We therefore check to see if the audio file has started to load, and proceed to set up the slider for the draggable playhead control. We’re using jQuery UI for our slider here, and the basic configuration options should be self explanatory. We add two event handlers; one on slide where we set a flag that we are manually seeking to a new position, and stop, to unset the flag and tell the browser’s audio player that it needs to move to our new position in the audio file.

The only thing left is the play/pause toggle button.

1
2
3
4
5
6
7
8
9
10

$(audio).bind('play',function() {
$("#playtoggle").addClass('playing');
}).bind('pause ended', function() {
$("#playtoggle").removeClass('playing');
});

$("#playtoggle").click(function() {
if (audio.paused) { audio.play(); }
else { audio.pause(); }
});

First we set up a couple of event handlers. When we start playing the audio, we add a class of ‘playing’ to the button so that it switches to the pause state. We then remove that class if we pause the audio playback, or reach the end of the file which fires the ‘ended’ event.

Our click handler for the play/pause button is very simple; play the audio if we’re currently paused, otherwise pause it.

So that’s it for a super simple audio player using lovely web standards instead of Flash. By going down this route, Tim’s visitors can use his audio player on mobile devices like the iPhone and iPad, and the loading performance of the player is hopefully better than would have been achievable with a plugin based solution. Go and listen to The Box, and if you have any questions or ideas for improving the player, please leave a comment.

UPDATE: Fixed the code for Opera, providing the WAVE source and a more detailed check for support of the buffered property.

UPDATE 2: Fixed a typo binding the play event handler, which should be $(audio).bind not audio.bind. Thanks to @patdryburgh for helping find that.

Useful Resources:

Image Credit: Miikka Skaffari

Ben Bodien is Principal & Co-Founder at Neutron Creations, where he oversees product design and front-end development. For a somewhat balanced mixture of ranting and raving, follow him on Twitter: @bbodien.

90 Responses

Tom Arnfeld

September 2nd 2010 @ 12:14 pm #

Such a useful article! Bookmarked :)
Lukes Beard

September 2nd 2010 @ 12:21 pm #

Well that was awesome, thanks!
patrick h. lauke

September 2nd 2010 @ 12:31 pm #

instead of simply having spans, would it make more sense to use focusable elements (buttons, or at a stretch links) so it’s also keyboard accessible?
patrick h. lauke

September 2nd 2010 @ 12:39 pm #

also, with my “web evangelist at Opera” hat on, any particular reason why on the live site the player is prevented from appearing in our browser?

if (supportsAudio && !$.browser.opera) { … }
Ben

September 2nd 2010 @ 12:44 pm #

Hey Patrick,

1) Yes, focusable elements would make more sense from an experience and pure semantic point of view. The markup and styling is Tim’s so I’ll nudge him to update that.

2) I had some problems getting the audio player working in Opera, and due to time constraints it shipped with a temporary hack to prevent a broken player appearing. I’m working on that now though and I’ll update the post shortly, with the live site to follow soon after with any luck.

Cheers!
Building a Custom HTML5 Audio Player with jQuery « Neutron Creations « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

September 2nd 2010 @ 1:10 pm #

[...] Building a Custom HTML5 Audio Player with jQuery « Neutron Creationsneutroncreations.com [...]
=== popurls.com === popular today

September 2nd 2010 @ 1:20 pm #

=== popurls.com === popular today…

yeah! this story has entered the popular today section on popurls.com…
albert

September 2nd 2010 @ 4:38 pm #

Hey,

Great code… only setback is the design is bugging in Chrome (background disappears when you press play), at least for me… havn’t tested the other browsers.

:)
Alex Penny

September 2nd 2010 @ 5:56 pm #

Nice! Now I don’t have to dismantle his code
Building a Custom HTML5 Audio Player with jQuery « Neutron Creations » Web Design

September 3rd 2010 @ 11:18 am #

[...] Building a Custom HTML5 Audio Player with jQuery « Neutron Creations [...]
Mohamed Jama

September 5th 2010 @ 1:41 pm #

Very nice and its playing nice with my chrome!
Catalina

September 5th 2010 @ 5:11 pm #

You guys rock!
inwebdeveloper

September 5th 2010 @ 9:02 pm #

awesome tutorial
Luke Walding

September 6th 2010 @ 1:25 am #

Nice player.

But what about more than one on a page? I gave that a crack and it doesn’t work.
Maya

September 6th 2010 @ 9:15 am #

What a great idea! I am going to try it now.
Ben

September 6th 2010 @ 12:14 pm #

Luke,

That could be a subject for another blog post. You’d need to modify the markup and jQuery such that the controls on each player only control their corresponding audio element; probably best done using jQuery’s traversing functions to select the appropriate audio element on which to call your API functions. We might write up a second post covering this at some stage.
Luke Walding

September 7th 2010 @ 7:54 am #

Sounds good Ben. I’ll keep an eye out.
lllnorikolll@headline » Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

September 8th 2010 @ 8:32 am #

[...] Building a Custom HTML5 Audio Player with jQuery « Neutron Creations. [...]
Markus

September 16th 2010 @ 2:06 pm #

Hi there!
I like your HTML5 player very much, but I have one problem:
The error console always tells me, that ‘audio.pause’ is not a function and the audio does’nt play, and I can’t find out, what is the problem…
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.
http://markusoelhafen.at/onemillionsong/play.html

Greets, Markus
Rajasekhar

September 17th 2010 @ 4:26 pm #

Hi Ben,

First Nice player its really cool.

And need few updates from u like:
1. Totally missed the safari 5.0.1 & dont know about the lower versions :(
2. Chrome: player background is not working properly
3. IE9 beta: working fine. dont know about the lower versions
4. Opera 10.61: working fine
5. Firfox 3.6.8: bar is not working & time display is missing something showing like ( -NaN:NaN )

I think i can expect the updates soon.
Ben

September 18th 2010 @ 3:56 pm #

@Markus

It looks like your audio source path is incorrect. The path you have is “http://markusoelhafen.at/music/songs/songID0.mp3″.

@Rajesekhar

The player works fine in Safari 5.0.1 as far as I can see. Some people have reported issues with Chrome, but later versions seem to render correctly. Firefox doesn’t support the buffered property as the article says, hence the buffered progress bar is disabled.
Luke Walding

September 28th 2010 @ 1:05 am #

Hi Ben,

Is there any way to stop Safari showing: “NaN:NaN” below the player when you load your site up?

I did notice that once you play the file, everything reverts to normal, it’s just the first load.

Any thoughts?

Cheers,

Luke
Ben

September 28th 2010 @ 11:41 am #

@Luke do you notice that appearing when you view the player on http://thebox.maxvoltar.com ? I don’t see it in Safari there.
Logan Best

October 8th 2010 @ 2:42 am #

Thebox player doesn’t work for me in Safari 5.0.2
Luke Walding

October 13th 2010 @ 2:54 am #

Yeah Ben, I just loaded up The Box and noticed it.

Any thoughts?
Ben

October 13th 2010 @ 12:42 pm #

@Logan & @Luke It’s working for me in 5.0.2. Do you guys get any error messages in the Web Inspector console?
给设计师看的HTML5 & CSS3 资源 - html5 时代 - 专注于HTML5/CSS3的技术博客

October 17th 2010 @ 2:08 pm #

[...] http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/ [...]
Ken

October 17th 2010 @ 7:27 pm #

Hi Ben,

I am having some trouble and was wondering if you could help. The part of your code where it reads “audio.currentTime = ui.value” is not working for me in Chrome. It simply does not set the value at all. This is causing problems with manually seeking through music.

In Firefox, it throws this error -> An attempt was made to use an object that is not, or is no longer, usable* code: *11
audio.currentTime = ui.value;

Would you have any ideas why this is happening?

Thanks!
Ken

October 17th 2010 @ 10:26 pm #

Figured it out… It was a corrupt ogg file…
How to Building a Custom HTML5 Audio Player with jQuery | Blogupstairs

October 22nd 2010 @ 2:43 am #

[...] Demo & Download : http://thebox.maxvoltar.com/ Source : http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/ [...]
Miley

December 6th 2010 @ 4:21 pm #

Thanks for this great article mate. It helped me lot to add audio player to my website.:)
Viet Dao

December 9th 2010 @ 5:42 am #

Doesn’t work in Safari 5.0.3
kumar

December 19th 2010 @ 7:56 pm #

Hello All,
I can not find the download link for the source script. Can anyone send me the link. I even went on http://thebox.maxvoltar.com/

It would be really helpful if someone can send me the direct link.

Thanks in advance.
Kumar
Ian

January 1st 2011 @ 5:47 pm #

I second what Kumar said. I’m having an impossible time putting these little bits and pieces of code together. the Max Voltar source doesn’t show anything of the player which is written here. I find these disconnected little bits of code extremely difficult to see how they fit together.

Could we at least see a “Final Step” with all the code together?

Thanks!
Ben

January 6th 2011 @ 2:28 pm #

@Kumar & Ian

That’s a good point guys, we should have included a demo page and zipped up code bundle. I’ll put that together and update the post soon.
Ian

January 6th 2011 @ 4:34 pm #

Thanks Ben! I was fairly certain I was doing it correctly, but it wasn’t working. Hopefully this will clear things up.
kumar

January 6th 2011 @ 4:39 pm #

Awesome Ben,

Keep up the good work !!!

Thanks,
Billy Clarke

January 25th 2011 @ 5:41 pm #

Hi Ben,

Can you tell me, could this been integrated into a WordPress site, so that in the backend you could upload new tracks like how you would for images in a post?

If not, then drat and if so, got any links?

Cheers man,

Billy
Creating a functional audio player

January 31st 2011 @ 3:32 pm #

[...] [...]
andy scott

March 13th 2011 @ 1:42 am #

i noticed the area about which browsers support what and you have one incorrect. Opera does support ogg.
Ged

May 2nd 2011 @ 9:13 pm #

Hey,

I’m wondering if anyone has managed to get this working? If so could you upload your source code please?

Thanks
40 HTML5 Media Players + Tutorials and Resources - WebsitesMadeRight.com

May 4th 2011 @ 12:12 am #

[...] Building a Custom HTML5 Audio Player with jQuery (Neutron Creations | Sep 2, 2010) [...]
45 HTML5 Media Players + Tutorials and Resources - WebsitesMadeRight.com

May 4th 2011 @ 4:41 pm #

[...] Building a Custom HTML5 Audio Player with jQuery (Neutron Creations | Sep 2, 2010) [...]
Carsten

May 16th 2011 @ 7:21 pm #

Just stumbled across this beautiful blog entry :)

To fix the bug, Ken wrote about, just enclose the audio.currentTime = ui.value; section in a try catch block and everything is cool.
Of course you need to react on when you can’t set the current Time on an audio object.
This is still buggy in some browsers.
Will

June 7th 2011 @ 12:38 am #

Could you possibly show how the code would look all put together?
Henrik Carlsson's Blog

June 14th 2011 @ 8:48 am #

[...] This (Link to the article) is a great run down of how to use the audio element from HTML5 alongside jQuery to create an in-browser audio player. Perfect as an introduction to <audio>. Posted by Henrik on 14 juni, 2011 [...]
Ứng dụng HTML5 chèn nhạc vào blog

August 2nd 2011 @ 3:03 am #

[...] là hoàn tất rồi . Ngoài ra các bạn có thể tham khảo thêm về cách tạo HTML5 audio player với Jquery (Tiếng Anh nhé).Filed Under: Dev & DesignSpeak Your Mind Cancel replyName *Email [...]
Scott

August 31st 2011 @ 4:35 pm #

Hi,

I’m trying to follow the instructions for this, as it would be perfect for a small web app I’ve been asked to develop for our local church, streaming sermons. Alas, I cannot get anything to to work, even after looking at the source of the live page. Could you please provide the files or a more detailed tutorial? Thanx.
Scott

September 15th 2011 @ 4:57 am #

I’ve got everything sorted and works fine, but I don;t suppose you could tell me how to change the loading/buffering function to just show a progress bar of how much audio has played behind the slider/playhead, just like an iPod Touch/iPhone?
Neuro

October 8th 2011 @ 11:56 pm #

@Scott

Care to define how you got things working? I too am working through the instructions and can’t seem to get it working.

“Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: jQuery is not defined

Uncaught TypeError: Cannot read property ‘buffered’ of undefined”
Native Audio with HTML5 | HTML5 Samples, Tutorials and News

October 13th 2011 @ 7:32 pm #

[...] can make your own custom player. You can visualize audio. You can generate audio on the fly. And these are just some of the early [...]
MiB

October 22nd 2011 @ 10:34 pm #

This was a nice starter article, but it should be noted it doesn’t support IE8 and I assume IE7 too. There were also some stutter in Chrome, though acceptable.
I’d use flash fallback or similar for IE8 and earlier versions of the browser most people can’t avoid.

What are the approaches for mobile surfers? Any ideas?

Big thank you for this article.
MiB

October 22nd 2011 @ 11:06 pm #

More troublesome than the above is that Opera Mini also doesn’t work with this player. At least not on IOS. Which is a bummer really, as flash obviously won’t work as fallback in OM. I’m not sure why this is as I haven’t targeted Opera Mini before.

Bem, did this player evolve since last year?
Max

November 8th 2011 @ 10:50 am #

Great article.

How can I make the popup player auto play the audio?
Stephen Davis

November 12th 2011 @ 4:26 pm #

Hey guys,
I’ve spent a lot of time debugging this code, and it seems like the main area a lot of people are having problems has to do with HTTP headers. Make sure your server is returning the following headers with your audio files:

Connection:keep-alive
Content-Length:[length]
Content-Type:audio/[type]
MP3 Player like grooveshark | SeekPHP.com

November 17th 2011 @ 11:38 am #

[...] Building a custom html5 audio player [...]
Steve

November 22nd 2011 @ 11:43 pm #

Great! Awesome example. Now it would be really awesome to see an example of how to make this player sticky across requests…
Bishop

November 30th 2011 @ 6:16 pm #

First thanks for this tutorial but what about a podcast Live?

I try to do that with a simple html5 code and when I change songs (I use Traktor+Icecast) the listenner just have few seconds of the new song and then it stops.

May be it’s a buffering trouble, can I have your advice?
(Sorry for my english… )
【FM 46.26】Alpha版发布 | 未来的光阴

December 1st 2011 @ 1:12 pm #

[...] [1] Safari HTML5 Audio and Video Guide – iOS-Specific Considerations [2] http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/ [3] http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/ [...]
jo

December 9th 2011 @ 9:11 pm #

What about a multiple track player without having redirect to another URL? If only there was some kind of web technology for playing audio…. oh wait, there is. It’s just Apple doesn’t like it. Not a happy programmer.
HTML5 and Jquery based Audio/Music Players | Php, mysql, ajax, jquery, javascript, css, html - Blog, Tutorials, Tips, Demos

January 2nd 2012 @ 1:06 pm #

[...] Custom HTML5 Audio Player with jQuery Tutorial [...]
Maria

January 10th 2012 @ 1:12 pm #

Hi!

I saw your website is great! That is why I am writing to you with a proposal for cooperation.

CoderSky as a young magazine and we are looking for collaborators who would be willing to write articles for us on the programming in exchange for advertising in an international magazine. But this is not a necessity. We also offer the opportunity to exchange banners or referrers. For us, this will mean expanding readership, advertisingopportunity for you in writing of the increasingly standard.

If you have any questions, write boldly will be happy to answer
Best,
45 HTML5 Media Players + Tutorials and Resources

January 14th 2012 @ 8:02 pm #

[...] Building a Custom HTML5 Audio Player with jQuery (Neutron Creations | Sep 2, 2010) [...]
tehk

February 11th 2012 @ 8:22 pm #

Awesome post! I used some of the info here to build my html5 soundcloud type player… which will be on my site when it launches in a few months, cheers!
MiB

February 12th 2012 @ 8:58 am #

This project is a valuable lesson to analyze. Very nice that you posted it.

For real world use however, the more useful solution is MediaElementJS: http://mediaelementjs.com/ that falls back on a configurable flash player that looks and works the same as the audio (or video) element player. I’m running it on my own site.
genefer

February 15th 2012 @ 6:15 am #

cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 audio player
luke madhanga

February 25th 2012 @ 3:00 pm #

Ive made a custom player using this tutorial. My audio.play() / audio.load() works in all of the browsers, apart from Safari which throws the error:

TypeError: ‘undefined’ is not a function (evaluating ‘audio.load()’).
MiB

February 25th 2012 @ 3:31 pm #

luke madhanga, interesting. But what do you mean with “All of the browsers” specifically?
luke madhanga

February 25th 2012 @ 4:35 pm #

I mean like the major ones, chrome, ff, opera etc… p.walkleftstudios.com/am1 [I haven't coded the scrubber yet].

Basically, if you open developer tools in Safari, and you click play on one of the music items, on the bottom right corner you see an error symbol. If you open the error, it says the error that I said earlier.

TypeError: undefined is not a function (evaluating ‘audio.load()’)
MiB

February 25th 2012 @ 5:03 pm #

OK, but what about Internet Explorer, 7, 8 and 9?
MiB

February 25th 2012 @ 5:04 pm #

And what about IOS and Android?
MiB

February 25th 2012 @ 5:05 pm #

luke madhanga, I’m not sure what you have done, but this player worked in Safari when I tried it.
luke madhanga

February 25th 2012 @ 5:38 pm #

It works in IE9 & IE10 (The Scrubber is just rotated the wrong way around), HTML5 audio isn’t supported in IE6-8, plus, microsoft is upgrading all IE’s to IE9, apart from those on Win XP who can only get up to IE8.

I haven’t got an Android or iPhone, but you’re right, I probably should test.

MiB, My example worked in Safari? I’m using the latest version and I checked over my code using the Tut. on their developer site.
MiB

February 25th 2012 @ 10:21 pm #

Microsoft are upgrading all IE’s? I can’t believe for a minute you really believe that.
As for XP, the fresh number to relate web development to is “Usage of XP has fallen from 48.8% of all online operating systems in January 2011 to 32.9% in January 2012.” http://www.itp.net/587472-number-of-windows-xp-users-dropping-rapidly
That one third (!) of all online machines. If you’re doing business on the internet, IE 7 and 8 can’t be ignored for some more time. It’s just a year ago IE 6 dropped out to a significant degree.

This is why I use MediaElementJS instead. MediaElement uses “fallforward” to Flash and manage to have very good Browser and Device Support including IE 6, 7, 8, 9 and 10. This is also true for the video element.

Which doesn’t mean this html5 audio player isn’t good learning and a fine example. But I can’t use this as is, in a site with a huge variety of users.
MiB

February 25th 2012 @ 10:29 pm #

Luke, yes your player works in Safari 5.06 at least.
luke madhanga

February 25th 2012 @ 10:38 pm #

http://www.computerworld.com/s/article/9222811/FAQ_Microsoft_s_new_IE_auto_upgrade_scheme_explained

Ah, I’m using 5.1, Ill tell apple about it. Thanks, but I don’t like designing a whole site around one element plugin, I’d rather create one….
but thanks…
HTML5 Audio/Video 标签,属性,方法,事件汇,使用 | flyxiang

February 27th 2012 @ 12:50 pm #

[...] [4]、Safari HTML5 Audio and Video Guide – iOS-Specific Considerations [5]、http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery [6]、http://dev.opera.com/articles/view/html5-audio-radio-player 此条目是由 flyxiang [...]
Building a Custom HTML5 Audio Player with jQuery « Neutron Creations « Programming

March 1st 2012 @ 3:39 am #

[...] http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/ Share this:TwitterFacebookLike this:LikeBe the first to like this post. « Previous post [...]
8 Best Free HTML5 Audio Players | Techno Tab

March 2nd 2012 @ 1:05 pm #

[...] building-a-custom-html5-audio-player-with-jquery [...]
shahdat

March 5th 2012 @ 8:28 am #

Hi How can I have source code?

Thanks
MiB

March 5th 2012 @ 5:12 pm #

luke madhanga, I read you article, but it doesn’t change much if IE 7 users upgrade to IE 8. As long as people stay on XP in double digits, business-oriented outfits building web sites can’t ignore IE8.

Mediaelementjs does not mean you build a site around a plugin at all. You just don’t get the idea. The idea is to to do everything this audio element player from Neutron does, also with video elements, and when a browser doesn’t support this replace the audio or video element with Flash (or Silverlight in the case of video) that uses the same CSS as the media element and thus looks the same.

Because of this, I find Mediaelement more useful as a full solution.
Luke Madhanga

March 5th 2012 @ 7:59 pm #

MiB, yh, you’re right.
Kasper Isager

March 26th 2012 @ 4:18 pm #

To all those of you who wants to add more than one player per page, I’ve found an easy way to do this:

http://stackoverflow.com/questions/9872473/multiple-instances-of-jquery-html5-audio-player

Kudos to @charlieftl over at Stackoverflow!
Audio Players, Browsers, and WordPress « WordPress Documentation Team Task List

March 30th 2012 @ 5:57 pm #

[...] Building a Custom HTML5 Audio Player with jQuery « Neutron Creations, The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding, Using HTML5 audio and video [...]
8 Best Free HTML5 Audio Players @ Effy的博客

April 13th 2012 @ 12:23 pm #

[...] 8 ) Building a Custom HTML5 Audio Player with jQuery [...]
Lorelle VanFossen at Clark College 30 Clicks Talking Podcasting | Learning from Lorelle

April 18th 2012 @ 6:12 pm #

[...] Building a Custom HTML5 Audio Player with jQuery « Neutron Creations [...]
How to Building a Custom HTML5 Audio Player with jQuery | codeManiac - Snippets, Templates, API and the best developer content

April 29th 2012 @ 4:47 pm #

[...] some jQuery to hook up the player interface he designed. Neutroncreations is sharing tutorial How to Building a Custom HTML5 Audio Player with jQuery through the code to explain how it works, covering a few caveats along the [...]
savo

May 1st 2012 @ 6:55 pm #

Very nice, but where download this beutifull script frineds??
Ary Wibowo

May 4th 2012 @ 9:21 am #

thanks for the article and great demo :)
Alan Killian

May 10th 2012 @ 10:36 am #

Hi, I am looking for someone to build a custom html player for a website. It will be quite a simple design – mainly a status bar. If anyone can help, please get in touch, info@muziko.com .

Regards, Alan.