Power of HTML5 Audio Tag – With IE9, Chrome, Safari, Wp7, iPhone, iPad

아티클
05/26/2011

I tried HTML5 Audio Tag myself and simply amazed by how easy this can be implemented. Meanwhile, because it is native to the browser, it works fine on most of browsers (I tired FireFox, IE9, Safari and Chrome) and most of devices (Mango version of Windows Phone, iPhone and iPad). This is my toy site: mbox.cloudapp.net. I may not host it long hence I have printscreen for all the scnarios below, so you could see how Audio Tag rendered in different end devices.

Currently, HTML5 audio element has five attributes:

autoplay: Specifies that the audio should start playing as soon as it is ready.
controls: Specifies that playback controls should be displayed.
loop: Specifies that the audio should start over again, when it is finished.
preload: Specifies whether or not the audio should be loaded when the page loads.
src: Specifies the URL of the audio to play.

This is how to implement HTML5 video tag with one single line of code.

  <audio id="player" src="YOUR_SOURCE_HERE" controls="controls" autoplay></audio>

And you can see the UI rendered like this in IE9. It shows a +30s and -30s when you mouse over the timer on both side. Also, current time and time for the whole song will be displayed as well.

Same Audio tag rendered like this in Chrome 11. It doesn’t show much as IE9, such as overall timing and 30s fast-forward/fast-backward.

This is how Audio Tag looks like on Safari 5. There is no current time and total time. However, you can drop to next song/previous song.

I tired Opera 11 as well. It rendered in the browser but it doesn’t play.Same thing happend to Firefox 4 Beta. Later on i found out it was because they don't support the audio format .Mp3.

I further tested Audio tag on iPhone 4.3 and iPad 4.3.3. It rendered as below. Moreover, when you minimize browser, music will still continue in the background. Double tab you could open the multi-task bar at the bottom of screen, swap right, you could see the native audio player control. I truly like this kind of native integration with HTML5 tag.

I tested Andiord phone as well, both 2.3 and 2.2 version. The Audio bar doesn’t get loaded. Current Windows Phone 7 doesn’t support Audio tag. However, since IE9 will be shipped with next version of Windows Phone 7, obviously, audio tag will be native to Windows Phone 7 browser in the near future as well.

I had a problem with starting a song with a specific timing, such as starting a song from 20 seconds (streaming). Because the song may not be loaded till that point, so if you jump to that point, it will have javascript error. Here is a way to solve it. And you can definitely improve it.

 <!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function timeMsg(startime) {

        var t = setTimeout("a("+startime+")", 5000);

    }



    function a(startime) {

        $("#player")[0].play();

        $("#player")[0].currentTime = startime;

    }

    function song_onClick(item) {

        var startTime = item.id;

        var songSrc = item.title;

        alert(songSrc + startTime);

        $("#player")[0].pause();

        $("#player")[0].src = songSrc;

        $("#player")[0].load();

        timeMsg(startTime);

     }

 </script>

</head>

<body>

 <audio id="player" src="YOUR_SOURCE_HERE" controls="controls" autoplay></audio>

    <div class="song" title="YOUR_SOURCE_HERE" id="20" onclick="song_onClick(this)">

        Maid with the Flaxen Hair

    </div>

</body>             

</html>

You can see from the code, the ID of the audio element is player.

$(“#player”)[0].src = songSrc; is used to change the song src. So that we can change to the next song.

However, here is the track. If you wanted to start a song from some random point, you have to load the song first (if the song is streamed). Hence, I used setTimeOut method here to delay playing the song for 5 sec and I started play the song from 20 seconds. However, still, if you start more than 20 seconds, 5 seconds may not be long enough. You could design it to times a multiplier.

Hope this post will inspire you to try out your audio application in HTML5, so you could benefit from one code base works for most of browsers and devices!

Comments

Anonymous
February 22, 2012
I cannot get autoplay to work on WP7. If I specify "autoplay' on the <audio> tag it seems to be ignored.
Anonymous
May 01, 2012
Nice one but how to find time that is elapse/remain in audio bar. so that i can trigger my own animation after particulate speech in audio tag is completed. sanket@systenics.com
Anonymous
August 15, 2012
I fond the auoplay issue too... how to deal with??????? anyone?
Anonymous
July 16, 2014
This is not working in safari and ipad and iphone. Please give me some suggestions. <!DOCTYPE HTML> <html> <head> </head> <body> <audio autoplay loop="true" id="myTune" preload="metadata"> <source src="Untitled-3.mp3" type="audio/mpeg" />  <source src="Untitled-3_w.wav" type="audio/wav" /> </audio> </body> </html>

다음을 통해 공유

Power of HTML5 Audio Tag – With IE9, Chrome, Safari, Wp7, iPhone, iPad

Comments

추가 리소스