Create a web audio player with HTML5 's audio tag

Currently, there is no standard way to play audio files on a Web page, most audio files are played using plug-ins, and many browsers use different plugins. The advent of HTML5 provides us with a standard way to play audio files from the Web, where users no longer upgrade their browser to playback plugins such as Adobe Flash, Apple QuickTime, and can listen to any Web site that can make a sound with a modern browser.

Audio tags in the web

HTML5 defines a new element used to specify the standard way to insert an audio file into a Web page in a:<audio> tag. You can use the Audio tab to control the playback and stop, the loop play and play times settings, and the playback location, etc., see the table below for details.

Property	Value	Describe
AutoPlay	true | False	If true, the audio plays as soon as it is ready.
Controls	true | False	If true, the control is displayed to the user, such as the play button.
End	numeric value	Defines where the player stops playing in the audio stream. By default, the sound is played to the end.
LoopEnd	numeric value	Defines where the loop playback stops in the audio stream, which is the value of the End property by default.
Loopstart	numeric value	Defines the starting position in the audio stream where the loop plays. The default is the value of the Start property.
Playcount	numeric value	Defines how many times an audio fragment is played. The default is 1.
Src	wr.	The URL of the audio being played.
Start	numeric value	Defines where the player starts playing in the audio stream. By default, the sound is played at the beginning.

The currently supported audio tag browsers are:

Ie9,firefox, Opera,chrome and Safari all support <audio> tags.

Note: IE8 and earlier versions, do not support <audio> tags.

How to use Audio

To play audio in HTML5, you need to insert the following code in the body:

4. <audio controls="controls">
6. <source src="music.ogg" />
8. <source src="music.mp3" />
10. <source src="music.wav" />
12. </audio>

You can insert text between the <audio> and </audio> tags so that if the browser doesn't support audio, the text will be displayed.

Perhaps you would ask how the auto contains 3 source tags? This is for browser and audio format compatibility, and the browser manufacturer does not agree to use one of the audio file formats. For example, Chrome, Internet Explorer 9 (IE9), and Safari browsers do not support WAV files, a standard that uses non-compressed formats and is declining. We place each video file name in a separate <source> tag, and all the source tags in the audio container are made up of <audio></audio>, as shown below. Then, no matter what browser the visitor uses, it will automatically select the first file type to read and play the sound for you.

HTML5 browser and audio format compatibility

audio format	chrome	firefox	IE9	opera	safari
ogg	support	support	support		not supported
mp3	support	not supported	support	not supported	supports
wav	does not support	support /td>		support	not supported

In addition, different browser audio space appearance is not the same.

HTML5 makes it easier for developers to deliver a large number of web experiences. <audio> tags are exciting new additions that no longer require an external music player, making audio available as simple as displaying an image. With standard-based audio controls and new browser features that make it easier for users to interact with sound, you can easily customize the MP3 player on your Web page.

Create a web audio player with HTML5 's audio tag