how to do Video by jquery by David Hellen

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

1 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

The Particle Lab a blog by Neutron Creations Building a Custom HTML5 Audio Player with jQuery

394 tweets | tweet this 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

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 buffering progress pdfMachine - is athe pdfloading writer or that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

2 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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 if(!!document.createElement('audio').canPlayType) { 2 3 4

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>';

9 10 $(player).insertAfter("#listen .photo"); 11 12} 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 audio = $('.player audio').get(0); 2 loadingIndicator = $('.player #loading'); 3 positionIndicator = $('.player #handle'); pdfMachine - is a pdf writer that produces quality PDF files with ease! 4 timeleft = $('.player #timeleft'); Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

3 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

5 6 if ((audio.buffered != undefined) && (audio.buffered.length != 0)) { 7

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

var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);

loadingIndicator.css({width: loaded + '%'});

10 }); 11} 12else { 13 loadingIndicator.remove(); 14} 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 $(audio).bind('timeupdate', function() { 2 3

var rem = parseInt(audio.duration - audio.currentTime, 10),

pos = (audio.currentTime / audio.duration) * 100,

mins = Math.floor(rem/60,10),

secs = rem - mins*60;

7 8

timeleft.text('-' + mins + ':' + (secs > 9 ? secs : '0' + secs));

if (!manualSeek) { positionIndicator.css({left: pos + '%'}); }

10 if (!loaded) { 11

loaded = true;

12 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 theproduces player interface, care to insert pdfMachine is a pdf writer in that quality taking PDF files with ease!a leading 0 if Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

4 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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 $(audio).bind('play',function() { 2

$("#playtoggle").addClass('playing');

3 }).bind('pause ended', function() { 4

$("#playtoggle").removeClass('playing');

5 }); 6 7 $("#playtoggle").click(function() { 8

if (audio.paused) { audio.play(); }

else { audio.pause(); }

10}); 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. - is a pdf writer that produces quality PDF files with ease! UPDATE 2: FixedpdfMachine a typo binding the play event handler, which should be $(audio).bind not audio.bind. Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

5 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

Thanks to @patdryburgh for helping find that. Useful Resources: HTML5 Doctor’s article on audio Dive Into HTML5′s All-In-One Almost-Alphabetical No-Bullshit Guide To Detecting Everything Safari Reference Guide to Audio and Video Opera Dev article creating an HTML5 player jPlayer – a ready made jQuery audio player plugin 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.

66 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!

pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

6 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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! 6.

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 # pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

7 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

[...] Building a Custom HTML5 Audio Player with jQuery « Neutron Creationsneutroncreations.com [...] 7.

=== 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 10.

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 [...]

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

8 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

11.

Mohamed Jama September 5th 2010 @ 1:41 pm # Very nice and its playing nice with my chrome!

12.

Catalina September 5th 2010 @ 5:11 pm # You guys rock!

13.

inwebdeveloper September 5th 2010 @ 9:02 pm # awesome tutorial

14.

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.

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

9 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

15.

Maya September 6th 2010 @ 9:15 am # What a great idea! I am going to try it now.

16.

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.

17.

Luke Walding September 7th 2010 @ 7:54 am # Sounds good Ben. I’ll keep an eye out. 18.

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. [...] pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

10 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

19.

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

20.

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.

21. pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

Ben

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

11 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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.

22.

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

23.

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. pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

12 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

24.

Logan Best October 8th 2010 @ 2:42 am # Thebox player doesn’t work for me in Safari 5.0.2

25.

Luke Walding October 13th 2010 @ 2:54 am # Yeah Ben, I just loaded up The Box and noticed it. Any thoughts?

26.

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? 27.

给设计师看的HTML5 & CSS3 资源 - html5 时代 - 专注于HTML5/CSS3的技术博客 October 17th 2010 @ 2:08 pm # [...] http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/ [...]

28. pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

Ken

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

13 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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!

29.

Ken October 17th 2010 @ 10:26 pm # Figured it out… It was a corrupt ogg file… 30.

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/ [...]

31.

Miley December 6th 2010 @ 4:21 pm # Thanks for this great article mate. It helped me lot to add audio player to my website.:) pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

14 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

32.

Viet Dao December 9th 2010 @ 5:42 am # Doesn’t work in Safari 5.0.3

33.

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

34.

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! pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

15 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

35.

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.

36.

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.

37.

kumar January 6th 2011 @ 4:39 pm # Awesome Ben, Keep up the good work !!! Thanks,

38.

Billy Clarke pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

16 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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 39.

Creating a functional audio player January 31st 2011 @ 3:32 pm # [...] [...]

40.

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.

41.

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 pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

17 of 25

42.

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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) [...]

43.

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) [...]

44.

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.

45.

Will June 7th 2011 @ 12:38 am # Could you possibly show how the code would look all put together? 46.

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 pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

18 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

Henrik on 14 juni, 2011 [...] 47.

Ứ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 [...]

48.

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.

49.

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?

50.

Neuro October 8th 2011 @ 11:56 # pdfMachine - is a pm pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

19 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

@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” 51.

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 [...]

52.

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.

53.

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 pdfMachine - is a pdf writer that produces quality PDF files with ease!

as I haven’t targeted Opera Mini before.Get yours now!

“Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

20 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

Bem, did this player evolve since last year?

54.

Max November 8th 2011 @ 10:50 am # Great article. How can I make the popup player auto play the audio?

55.

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] 56.

MP3 Player like grooveshark | SeekPHP.com November 17th 2011 @ 11:38 am # [...] Building a custom html5 audio player [...]

57.

Steve pdfMachine - is a pdf writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

November 22nd 2011 @ 11:43 pm #

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

21 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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

58.

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… ) 59.

【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-customhtml5-audio-player-with-jquery/ [...]

60.

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. 61.

HTML5 and Jquery based Audio/Music Players | Php, mysql, ajax, jquery, javascript, css, html - Blog, Tutorials, Tips, Demos January 2nd 2012 @ 1:06 pdfMachine - is apm pdf#writer that produces quality PDF files with ease! Get yours now! “Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

22 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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

62.

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, 63.

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) [...]

64.

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!

65.

MiB

2/22/2012 12:00 AM

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations

23 of 25

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-w...

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.

66.

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