Visitors Today: 152
Total Visits: 435091


Do you have source code, articles, and tutorials to share?
Visual Basic, VB.NET, C#, PHP/MySQL, C/C++, Java/JavaScript, ASP/ASP.NET, MS Access, FoxPro, SQL
You can write your own content here.


    If the information on this site helps you and you would like to make donation to please click the LINK below.

    If you want to support us, please make a contribution. Any amount is appreciated. To make a donation via PayPal, credit card, or e-check..

    Please click the DONATE link..

    Your contribution will make grow in the future.



Play MP3, Ogg, Wav files with HTML5

    Posted Mafia King Posted On December 19, 2015

    HTML5 0 Current Comments 874 Views

    Like 0 people liked this.
    With HTML5 we can play audio files easily, but before HTML5, we could only play these files using Flash player or Media Player plugins. Old browsers didn’t have inbuilt media player that could perform these tasks. But HTML5 we don’t need anything, just regular <audio> HTML element.

    HTML <audio> Element

    HTML5 has new element called <audio>, it is used to embed sound content in webpages. It renders a media player on the browser, which can be controlled using its buttons.
    <audio controls="controls">
        Your browser does not support the audio element.
        <source src="whitney_houston-i_will_always_love_you.mp3" type="audio/wav">
        <source src="whitney_houston-i_will_always_love_you.ogg" type="audio/wav">

    As you can see the code is very simple, you may include several audio formats using <source> elements, browser will pick the most suitable one.


    There are several attributes you can add to audio element, which controls the functionality of audio player.

  • controls – Displays audio control. Remove this attribute to hide player.

  • autoplay – Plays audio file automatically.

  • src – Optional attribute, you may use <source> elements instead.

  • volume – Playback volume of audio (0.0 to 1.0).

  • buffered – Displays the buffered time ranges of the media.

  • loop – Restarts playing upon reaching end of the audio.

  • muted – Loaded audio will be muted initially.

  • preload – It can be “none”, “metadata” or “auto”.

  • “none” – data is not loaded initially.

  • “metadata” – downloads audio info (like length) but not whole file.

  • “auto” – downloads whole audio file, even if user doesn’t play it.

  • HTML5
  • Media
Share With Your Friends
Share Your Thoughts With Other Users

Be the first to comment.

Leave a Reply
This small test serves as access restriction against malicious bots.