Introduction to the use of audio labels in HTML5-html5 tutorial skills-

This article mainly introduces the use of the audio tag in HTML5. You can add audio playback controls in various browsers. For more information, see the HTML5 standard webpage, we can use the audio tag to call and play the sound. The following are the three basic HTML5 formats most often used:

1. Minimum Code

The Code is as follows:

2. Codes with incompatible reminders

The Code is as follows:

Your browser does not support the audio tag.

3. Try to be compatible with the writing of browsers

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, PNG, JPEG, or GIF files can be loaded to Your webpage in any browser. Unfortunately, this is not the case with audio files. Table 1 shows the formats of audio files that can be used on webpages, but not all formats can be used in all browsers. For example, Chrome, Internet Explorer 9 (IE9) and Safari do not support WAV files, which is a standard that uses non-compressed formats and is declining.

HTML5 browser and audio format compatibility

There is no common file format that allows each browser to use a single file format, which means at least 2/5 of browsers cannot play certain sounds. This does not mean that browser manufacturers cannot reach an agreement in a single audio standard will not compromise, but will involve legal and financial issues concerning patent rights and royalties. The OGG format, which is not subject to software patents, is designed to solve this problem once and for all. However, Opera and Safari do not support OGG at the time of writing this article. Compared with files in OGG format, there are more available WAV and MP3 files, so there is no doubt that browser manufacturers have taken this into consideration. MP3, as the standard of fact, is a good solution.

Solution: use three file types and tags

In view of the current situation, you may think that it is not the prime time to use audio on HTML5 pages. This may be true in some ways, but HTML5 provides a solution that allows your favorite browser to find a compatible format.

When used with tags,Labels can be nested in the container. Assume that you are a fan of Wagner and want to listen to his opera Ride of the Valkyries on the HTML5 webpage. First, you need to obtain three types of file Music: OGG, MP3, and WAV. Place these music files and HTML5 files in the same folder. Then, put each file name in a separateLabel, and all the source labels in the audio container areAs shown in the following figure.

The Code is as follows:

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

Once you decide to provide audio on your website, you will face an interesting design option. Every browser has a distinctive appearance, and it seems like consciously trying to make it stand out.

In addition to Chrome, all browsers have the start/stop control, progress bar, Slider, playback seconds, volume/mute control, and display the total number of seconds of the audio file. With 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 with users.

Some browsers (such as IE9) even have their own sound control bars that run outside the browser itself. When a user opens any website with sound, they can control the sound from the Windows taskbar and be able to preview the currently playing sound.

Html code (hide the playback control)

The Code is as follows:

Code demonstration (hide the playback control)

The Code is as follows: