In this blog post I am referring to the Audio Player feature that is available with HTML/HTML5.
audio element is used to play audio files (MP3, OGG, or WAV) from a web page.
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:
Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.