working with audio tag in HTML5

working with audio tag in HTML5

The <audio> tag of HTML5 have the power of embedding and controlling audio in your web pages with a single line of coding

I am introducing the <audio> tag in detail here with code examples

To include an audio into your web page

<audio src="/test/audio.ogg"><p>Your browser does not support the audio element.</p></audio>

The src parameter can be a URL of the audio file or the path to the file on the you computer

<audio src="audio.ogg" controls autoplay loop><p>Your browser does not support the audio element </p></audio>

The following attributes may be used in your audio tag

  • controls: Displays the standard HTML5 controls for the audio on the web page.
  • autoplay: Makes the audio play automatically.
  • loop: Make the audio repeat (loop) automatically.
  • <audio src="audio.mp3" preload="auto" controls></audio>

The preloadattribute is used in the audio element for buffering large files. It can take one of 3 values:

  • "none"does not buffer the file
  • "auto"buffers the media file
  • "metadata"buffers only the metadata for the file
  • Controlling an HTML5 audio player to play, pause, increase and decrease volume using some Javascript is straightforward.

    <audio id="demo" src="audio.mp3"></audio>

         <div> 

        <button onclick="document.getElementById('demo').play()">Play the Audio</button> 

 <button onclick="document.getElementById('demo').pause()">Pause the Audio</button> 

 <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button> 

 <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>

</div>

8 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Great

Post as Article

karthik

thank you

good article , very usefull :)

it's really helpful, thx :)

thank you guys...

hi PONRAM, excellent post!

JudLup Luna

hi PONRAM, excellent post!

JudLup Luna

Leave a Comment

Please sign in to add a comment. Not a member? Join today