Introduction to the HTML5 audio tag javascript manipulation

68 thoughts on “Introduction to the HTML5 audio tag javascript manipulation”

1. Also, it’s not working in IE for me. It’s perfect in all other browsers. Any suggestions? Thanks!

   1. Simple!
      Step 1:
      create a new audio object.

      audio = $(”, {
      ‘loop’ : ‘loop’,
      ‘autoplay’ : ‘autoplay’
      });

      Step 2:
      Than check if it can play mp3 by doing

      (audio[0].canPlayType(‘audio/mpeg’)

      or for ogg

      (audio[0].canPlayType(‘audio/ogg’)

      Step 3:
      If it can play mp3 than load the mp3, or ogg than load ogg

      final code

      ——beginCode—-
      audio = $(”, {
      ‘loop’ : ‘loop’,
      ‘autoplay’ : ‘autoplay’
      });

      if (audio[0].canPlayType(‘audio/mpeg’)){
      $(”, {
      ‘src’ : ‘/audio/le.mp3’,
      ‘type’ : ‘audio/mpeg’
      }).appendTo(audio);
      }
      if (audio[0].canPlayType(‘audio/ogg’)){
      $(”, {
      ‘src’ : ‘/audio/le.og’,
      ‘type’ : ‘audio/mpeg’
      }).appendTo(audio);
      }
      —– endOfCode—–

2. Hi, the tag is working fine in Firefox for me, but on Windows the player controls look like “falling” downwards some 20 pixels after pressing play, and this causes troubles with pressing pause afterwards, because the button position is not recognised apparently. How could one make the controls stay in the same position, like it happens in Safari or Chrome, or even in Firefox on Mac OS X ?
   Thank you

3. Hello! Nice article! just one question:
   What is the song you are playing in the demo? it’s quite cool!

   1. SoundHound tells me it’s ‘Glasgow Mega Snake’ by Mogwai. 🙂

4. wow ， nice ！ it’s very useful for me

5. I downloaded the audiotag provided by Cedric and copied it to my website. The page is loaded like in the Demo, but the difference is that I don’t hear anything at my site. I use Firefox 6 in my Windows 7 laptop.

   1. The problem seems to be at my Goddady hosting web site. I copied audiotag to my personal web site and it works. Goddady doesn’t support java script?

6. Wouldn’t a simple
   Audio.prototype.stop=function(){
   this.pause();
   this.currentTime=0;
   }

   be working as a future stop method?

7. i do it like this:

   function playsound()
   {
   var audioElement = document.getElementById(‘alarm’);
   audioElement.play();
   }
   but “document.getElementById(‘alarm’)” selector, kills jquery selectors

   if i use jquery selector like this:

   function playsound()
   {
   var audioElement = $(‘#alarm’);
   audioElement.play();
   }
   or

   function playsound()
   {
   $(‘#alarm’).play();
   }

   then it’s don’t work :/

   how can i use it with jquery selectors ?

8. i found..
   selector: $(“#audio”)[0]

   functions:

   function togglesound()
   {
   if($(“#audio”)[0].paused)
   {
   $(“#audio”)[0].play();
   }else
   {
   $(“#audio”)[0].pause();
   }
   }

   function stopsound()
   {
   if($(“#audio”)[0].played)
   {
   $(“#audio”)[0].pause();
   $(“#audio”)[0].currentTime=0;
   }
   }

   thanks for article..

9. Thanks, this really helped me out.
   Here’s the code to stop the track:
   function stop() {
   document.getElementById(“audio”).currentTime=0;
   document.getElementById(“audio”).pause();
   }
   It’s very simple, I know, but I just thought i’d share it.

10. Nice work . It got me started on audio tags. i’m just curious that whether audio tag have load method or not . because the demo’s duration never shown up for me .. and it did when i changed the load to canplaythrough .. https://developer.mozilla.org/en-US/docs/DOM/Media_events

11. Hi, only firefox and opera dont support mp3 files on js player. All the others allow mp3.

12. For stop
    you can give like following code..

    function stop()
    {
    myaudio.pause();
    myaudio.currentTime = 0;
    }

Comments are closed.