This paper briefly introduces the use of audio tag in HTML5

Time:2021-11-27

In the HTML5 standard web page, we can use the audio tag to call and play the sound. The following are the three basic formats most commonly seen using HTML5:

1. Minimum code

Copy code

The code is as follows:

<audio src=”song.ogg” controls=”controls”></audio>

2. Code with incompatibility reminder

Copy code

The code is as follows:

<audio src=”song.ogg” controls=”controls”>
Your browser does not support the audio tag.
</audio>

3. Try to be compatible with the writing method of the browser

Copy code

The code is as follows:

<audio controls=”controls”>
<source src=”song.ogg” type=”audio/ogg”>
<source src=”song.mp3″ type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>

Browser and audio compatibility

Not all browser manufacturers agree to use an audio file format. For images, PNG, JPEG or GIF files can be loaded into your web page on any browser. Unfortunately, this is not the case with audio files. Table 1 shows the audio file formats that can be used in web pages, but not all formats can be used in all browsers. For example, chrome, Internet Explorer 9 (IE9), and safari browsers do not support wav files, a declining standard that uses uncompressed formats.

HTML5 browser and audio format compatibility

There is no common file format for each browser to use a single file format, which means that at least two-fifths of browsers cannot play some sounds. This is not an uncompromising issue for browser manufacturers who cannot agree on a single audio standard, but a legal and financial issue involving patents and royalties. The Ogg format, which is not restricted by software patents, aims to solve this problem once and for all. However, at the time of writing, neither opera nor Safari supports Ogg. There are more wav and MP3 files available than Ogg format files, so there is no doubt that browser manufacturers take this into account. MP3 as a factual standard is a good solution.

Solution: use three file types and < audio > tags

Given the current situation, you may think that this is not the golden time to use audio on HTML5 pages. This may be true in some ways, but HTML5 provides a solution that enables your favorite browser to find a compatible format.

When used in conjunction with < audio > tags, < source > tags can be nested within < audio > containers. Suppose you are a Wagner fan who wants to listen to his opera ride of the Valkyries on the HTML5 web page. First, you need to get music of three file types, namely Ogg, MP3 and wav. Put these music files in the same folder as HTML5 files. Then, put each file name in a separate < source > tag, and all source tags in the audio container are composed of < audio > < / audio >, as shown below.

Copy code

The code is as follows:

<audio controls>
<source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
<source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
<source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

No matter what browser the visitor uses, it will automatically select the first file type read and play the sound for you.
Browser audio controls: no two are identical

Once you decide to provide audio on the website, you will face an interesting design choice. Every browser has a different appearance, which seems to be deliberately making it different.

In addition to chrome browsers, all browsers have start / pause controls, progress bar, slider, playback seconds, volume / mute controls, and display the total seconds of sound files. Using HTML5 standard and browser support, developers can believe that users will have a similar experience with HTML5 audio because browser controls are similar. You can also use plug-ins such as flash and Silverlight to create controls, but the experience may vary for different users.

Some browsers (such as IE9) even have their own sound control bar, which runs outside the browser itself. When users open any website with sound, they can control the sound from the windows taskbar and preview the sound currently playing.

HTML code (hide playback control)

Copy code

The code is as follows:

<audio autoplay=”autoplay”>
<source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ type=”audio/mpeg”>
</audio>

 

Code demonstration (hide playback control)

Copy code

The code is as follows:

<audio autoplay=”autoplay” controls=”controls”>
<source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ type=”audio/mpeg”>
</audio>

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]