Wednesday, February 8, 2012

A test of blog's BGM using HTML5


W3Schools.com have had many information about standard of W3C.
Especially It announced HTML5 tutorials. It's very useful for me.

http://www.w3schools.com/html5/default.asp

Some blogs have a background music such as BGM.
Most of all are used windows media player in Internet Explorer.

This sample used <audio> tag of HTML5.
I set auto play and hided controls. Maybe you can listen to music in this post.

Of course, It can be played in a browser that support <audio> tag of HTML5.
Under Internet Explorer 8, you saw just some text.

The source is as follows.
In the below source it is set control and repeat.


<audio autoplay="autoplay" loop="loop" controls="controls">
  <source src="rain.mp3" type="audio/mpeg" />
  <source src="rain.ogg" type="audio/ogg" />
</audio>

I tested at mobile environment.
Android is a fully working  auto play.
Though iPhone support HTML5, it is not working auto play.
Only when the user clicks, the music is playing.

5 comments:

  1. The primary challenge was that Javascript doesn’t have any built in mechanism for accessing the volume of a playing audio tag. To address this I wrote a little AIR application that will read an MP3 file using Sound.extract() and export peak volume data as a text or JPG image file. I then wrote a JS class called VolumeData.js that reads in these files and provides access to the data via a simple interface (ex. myVolumeData.getVolume(time)html5 music player ).

    ReplyDelete
    Replies
    1. HTML5 takes control using the DOM.
      In tag, there are properties (e.g. duration, volume, seeking) that you can read or set.
      There are also DOM events that can notify you, for example, when the element begins to play, is paused, is ended, etc.

      http://www.w3schools.com/html5/html5_video_dom.asp

      Delete
  2. Thank you very much.
    I'll try to write a better article.

    ReplyDelete
  3. Nice Experiment on audio tag.Its easy way to have audio tag works well at android and iPhone.youtube html5 player

    ReplyDelete