JavaScript Error

Audio Player

In this blog post I am referring to the Audio Player feature that is available with 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):

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.

	(0)
	(0)