Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use audio tags in HTML5". In daily operation, I believe many people have doubts about how to use audio tags in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "how to use audio tags in HTML5". Next, please follow the editor to study!

In the HTML5 standard web page, we can use the audio tag to complete our call and playback of sound. Here are the three basic formats you see most frequently using HTML5:

1. The least code

The code is as follows:

two。 Code with incompatibility reminders

The code is as follows:

Your browser does not support the audio tag.

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

The code is as follows:

Your browser does not support the audio tag.

Browser and audio compatibility

Not all browser manufacturers agree to use a certain audio file format. For images, files in PNG, JPEG or GIF format can be loaded into your web page on any browser. Unfortunately, audio files are not the case. 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 decaying standard that uses an uncompressed format.

HTML5 browser and audio format compatibility

The absence of a common file format that allows each browser to use a single file format means that at least 2 Universe 5 browsers cannot play some sounds. It's not a matter of browser makers who can't agree on a single audio standard, but it's a legal and financial issue involving patents and royalties. The OGG format, which is not subject to software patents, is designed to solve this problem once and for all. At the time of this writing, however, neither Opera nor Safari supports OGG. There are more WAV and MP3 files available than files in OGG format, so there is no doubt that browser manufacturers take this into account. MP3 as a de facto standard is a good solution.

Solution: use three file types and 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 so that your favorite browser can find a compatible format.

When used in conjunction with tags, labels can be nested within a container. Suppose you are a Wagner fan and want to listen to his opera Ride of the Valkyries ("Vulcan") on the HTML5 page. First, you need to get three file types of music, namely, OGG, MP3, and WAV. Put these music files in the same folder as the HTML5 files. Then, put each file name in a separate tag, and all source tags in the audio container are made up, as shown below.

The code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.