Wednesday, 26 January 2011

HTML5 : Easy Support For Audio Files



To embed an audio file simply wrap the audio file source tag with the newly introduced audio tag as mentioned below:

    <audio id="audio_tag_id" controls autobuffer>
      <source src="audio_files/my_fav_song.mp3" type="audio/mpeg"/>
    </audio>

If you want to give a control to play the audio, create a button with the play event support like this:

<button id="play_the_audio_id">Play</button>
<script>
var audio_file = document.getElementById('audio_tag_id');
var play_button = document.getElementById('play_the_audio_id');
play_button.addEventListener(
'click', function() {
audio_file.play();
},
false);
</script>

Similarly to give control to pause the audio, create another button with the pause event support like this:

<button id="pause_the_audio_id">Pause</button>
<script>
var audio_file = document.getElementById('audio_tag_id');
var pause_button = document.getElementById('pause_the_audio_id');
pause_button.addEventListener(
'click', function() {
audio_file.pause();
},
false);
</script>

No comments:

Post a Comment