You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

Audio Player




In this blog post I am referring to the Audio Player feature that is available with HTML/HTML5.

The audio element is used to play audio files (MP3, OGG, or WAV) from a web page.


Example Source Code

In the following example, I use the audio element to play an m4a audio sound track (as an mp3). I set the controls attribute to have the element automatically add player controls (play, pause, volume):

 

    <audio controls style="height:22px;">
        <source src="SoundTrack01.m4a" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

In the event that the users web browser does not support the audio element, you can either display a message to them (as in the example above) or you can provide them with an alternative method of playing the audio sound file, such as in the following example:

 

    <audio controls style="height:22px;">
        <source src="SoundTrack01.m4a" type="audio/mp3">
        <a href="SoundTrack01.m4a" target="_blank">
            <img src="speaker32x32.png" alt="audio track">
        </a>
    </audio>

When you run the above example then you should see something similar to the following screenshot image (unless your web browser does not support the audio element):

example3

The actual source code from the example shown above used in this web page is as follows:



Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022