Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HTML5 Audio element and its attributes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 318
    Comment on it

    Earlier in order to play an audio file in browser Flash was used. But with HTML5 audio element we can play the audio files without the need of the flash.

    It supports formats like:

    1. mp3
    2. ogg
    3. wav

    The syntax of <audio> element is:

    <audio controls >
         <source src="horse.ogg" type="audio/ogg">
         <source src="horse.mp3" type="audio/mp3">
    </audio>

    The attribute controls add audio controls to the audio element like play, pause and volume.

    Audio tag has numbers of attributes but the basic attributes that are used in the audio element are:

    S.No. Attributes Description
    1 autoplay This attributes automatically play the audio in the source as soon as the element is loaded.
    2 loop This attributes re-play the song as soon as it is finished.
    3 src This attributes is used to set the current song source path.
    4 preload This attributes loads the audio at the page load, but autoplay attribute is present this attribute is ignored.

    Note: <audio> tag is fully supported in Chrome, but in-order to play .mp3 files in mozilla you will need a third party music player installed in your systems like VLC, Media Player, etc. and I.E. does not support .wav and .ogg format.

    Sometime the browser does not play the .mp3 or .ogg files automatically so we need to define there mime types in the source attribute i.e.:

    AddType audio/mp3 .mp3
    AddType audio/ogg .ogg
    AddType audio/wav .wav

    Here is jsfiddle link of the <audio> tag:

    https://jsfiddle.net/r6te6n76/7/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: