JAVASCRIPT > gestion de l’audio

Add and play a sound via JavaScript

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'loading.ogg');
audioElement.play();

Get the song filepath and duration

audioElement.src;
audioElement.duration;

Load a sound

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'Mogwai2009-04-29_acidjack_t16.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
  audioElement.play();
  $(".duration span").html(audioElement.duration);
  $(".filename span").html(audioElement.src);
}, true);

Stop a song

audioElement.pause();

Change volume

audioElement.volume=0;

Play at exactly 35 seconds in the song

audioElement.currentTime=35;
audioElement.play();

The bad parts

No stop(), only pause(), I really do not know what stopped them to put stop() in the API.
No way to get the songs name.
The only accessible format are ogg and wav, no mp3 love. It also means that you will have to convert all your sounds in ogg.
As I said this is a bit buggy but understandable, the specs are not even finished.
Microsoft will probably implement the audio and video tag in 2022.

The good parts

The API is easy to use, you can have a song playing in no time.
You do not need to parse the audio object in the HTML body, you can have it played directly in your script.
In the end, I’m really happy on how this turned out.

Download the source code View demo

Ressources

http://hacks.mozilla.org/2009/06/exploring-music-audio/
https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox
http://webkit.org/blog/140/html5-media-support/

Commentaires

1. Simple!
   1. 1. Step 1:
         create a new audio object.audio = $(”, {
         ‘loop’ : ‘loop’,
         ‘autoplay’ : ‘autoplay’
         });
      2. Step 2:Than check if it can play mp3 by doin(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. nicola says:

   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. Gerry says:

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

   1. Qyzbud says:

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

4. 痞子 says:

   wow ， nice ！ it’s very useful for me

5. Jun says:

   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. Jun says:

      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. Macke says:

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

   be working as a future stop method?

7. MuratHan says:

   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. MuratHan says:

   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. Daniel says:

   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. arun says:

    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. Claudio says:

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

12. Jitendra Raj (B.Tech) says:

    For stop
    you can give like following code..

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