A brief introduction to the use of audio tags in HTML5_html5 tutorial skills-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

A brief introduction to the use of audio tags in HTML5_html5 tutorial skills

May 16, 2016 pm 03:46 PM

audio html5

In HTML5 standard web pages, we can use the audio tag to complete our call and playback of sounds. The following are the three most commonly seen basic formats using HTML5:

1. Minimal code

Copy code

The code is as follows:

&lt ;audio src="song.ogg" controls="controls"></audio>

2. Code with incompatibility reminder

Copy the code

The code is as follows:

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

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 on the use of a certain audio file format. For images, files in PNG, JPEG, or GIF format will load into your 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 are available in all browsers. For example, Chrome, Internet Explorer 9 (IE9), and Safari browsers do not support WAV files, a declining standard that uses an uncompressed format.

HTML5 browser and audio format compatibility

Not having a common file format for every browser to use means that at least 2/5 of the browsers will not be able to play certain sounds. This isn't a matter of browser makers being intransigent and unable to agree on a single audio standard, but rather a legal and financial issue involving patent rights 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 support OGG. There are more WAV and MP3 files available than there are files in the OGG format, so no doubt browser manufacturers have taken this into consideration. MP3 as the de facto standard is a great solution. Solution: Use three file types and the <audio> tag

Given the current situation, you might think that it’s not yet prime time for using audio on HTML5 pages. In some ways this may be true, but HTML5 provides a solution that enables your favorite browser to find a compatible format.

When used in conjunction with the <audio> tag, the <source> tag can be nested within the <audio> container. Let's say you're a Wagner fan and want to listen to his opera Ride of the Valkyries on an HTML5 page. First, you need to get your music in three file types, namely OGG, MP3, and WAV. Place these music files in the same folder as the 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:

&lt ;source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />

No matter what browser your visitor is using, it will automatically select the first file type it reads and play the sound for you.
Browser audio controls: No two are exactly the same

Once you decide that you want to serve audio on your website, you'll be faced with an interesting design choice. Each browser has a distinctive look that looks like there was a conscious effort to set it apart.

All browsers except Chrome have start/pause controls, progress bar, slider, play seconds, volume/mute controls, and also display the total seconds of the sound file. Using the HTML5 standard and browser support, developers can be confident that users will have a similar experience with HTML5 audio because the browser controls are similar. You can also create controls using plug-ins such as Flash and Silverlight, but the experience may vary for different users.

Some browsers (like IE9) even have their own sound control bar that runs outside of the browser itself. When users open any website that has sound, they can control the sound from the Windows taskbar and be able to preview the sound that is currently playing.

html code (hide playback controls)

Copy code

The code is as follows:

Code demonstration (hide playback controls)

Copy code

The code is as follows:

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn