HTML5 tag audio add webpage background music code

HTML5 tag audio add webpage background music code

Html5

It is a new tag of HTML 5 that defines sound, such as music or other audio streams.

HTML 5

Tag

HTML5 audio makes music a comeback

HTML5 uses aduio tags to create a music player

 

You can place text content between the start tag and the end tag so that the old browser can display information that does not support the tag.

1234	<audio autoplay=autoplay controls=controlsloop=loop preload=auto src=http://demo.mimvp.com/html5/take_you_fly.mp3> Your browser does not support audio tags audio>

Attribute	Value	Description
Autoplay attributes> autoplay	Autoplay	If this attribute appears, the audio will be played immediately after it is ready.
Controls property> controls	Controls	If this attribute is displayed, the control, such as the play button, is displayed to the user.
Loop property> loop	Loop	If this attribute is displayed, the audio will be played again at the end of each audio loop.
Preload attribute> preload	Preload	If this attribute is displayed, the audio is loaded when the page is loaded and ready for playing. If "autoplay" is used, this attribute is ignored.
Src property> src	Url	The URL of the audio to be played. You can also useTag to set the audio.

 

Support for HTML5 Audio labelsWav, mp3, ogg, acc, webmBut there is a very important music file format.Midi(Extension mid), but there is no built-in support in all major browsers (see here ). Not all browsers support MP3 OGG and the like. Each browser supports different formats due to copyright issues.

 

Browser and audio compatibility

Not all browser manufacturers agree to use a certain audio file format. For images in PNG, JPEG, or GIF formatAnyCan be loaded to your web page in the 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

Audio Format	Chrome	Firefox	IE9	Opera	Safari
OGG	Supported	Supported	Supported	Not Supported	Not Supported
MP3	Supported	Not Supported	Supported	Not Supported	Supported
WAV	Not Supported	Supported	Not Supported	Supported	Not Supported

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

Tag

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.

And

When tags are used in combination, Labels can be nested in the container. Assume that you are a fan of Wagner and want to listen to his opera on the HTML5 webpage. Ride of the Valkyries (female warrior). 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 separate Label, and all the source labels in the audio container areAs shown in the following figure.

 

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. Figure 1 below shows the appearance of these browser controls.

Figure 1: audio controls on different browsers

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)

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

 

Code demo(Hide the playback control)

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