Home >Web Front-end >H5 Tutorial >Detailed analysis of audio in HTML5

Detailed analysis of audio in HTML5

寻∝梦Original: 2018-08-13 18:21:082095browse

There are many new things in HTML5, which are somewhat different from the old version. This article will describe the detailed analysis of the new audio elements in HTML5

HTML5 Audio(audio)

Last modified on August 1, 2017

HTML5 provides a standard for playing audio files.

Audio on the Internet

Until now, there was no standard for playing audio on web pages.

Today, most audio is played through plug-ins (such as Flash). However, not all browsers have the same plugins.

HTML5 specifies a standard for embedding audio elements on web pages, using the b97864c2e0ef2353a16c4d64c7734e92 element.

Browser support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari all support the b97864c2e0ef2353a16c4d64c7734e92 element.

Note: Internet Explorer 8 and earlier IE Version does not support the b97864c2e0ef2353a16c4d64c7734e92 element.

HTML5 Audio - How it works

To play audio in HTML5, you need to use the following code:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网</title> 
</head>
<body>
<audio controls>
  <source src="/statics/demosource/horse.ogg" type="audio/ogg">
  <source src="/statics/demosource/horse.mp3" type="audio/mpeg">

Your browsing The processor does not support the audio element.

81d2bc32cafa2076a27f10cdd878d0ab

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

control properties are used to add play, pause and volume controls.

Between b97864c2e0ef2353a16c4d64c7734e92 and 81d2bc32cafa2076a27f10cdd878d0ab you need to insert the prompt text of the b97864c2e0ef2353a16c4d64c7734e92 element that the browser does not support.

Theb97864c2e0ef2353a16c4d64c7734e92 element allows the use of multiple e02da388656c3265154666b7c71a8ddc elements. The e02da388656c3265154666b7c71a8ddc element can link different audio files, and the browser will use the first supported audio file

Audio formats and browser support

Currently, the b97864c2e0ef2353a16c4d64c7734e92 element supports three audio format files: MP3, Wav, and Ogg;

MIME types of audio formats: MP3, Ogg, Wav ;

HTML5Audio tag:

b97864c2e0ef2353a16c4d64c7734e92 defines the sound content

e02da388656c3265154666b7c71a8ddc specifies multimedia resources, which can be multiple, between 39000f942b2545a5315c57fa3276f220 The attributes of the

b97864c2e0ef2353a16c4d64c7734e92 tag used in the b97864c2e0ef2353a16c4d64c7734e92 tag:

autoplay: If this attribute appears, the audio will be played immediately after it is ready.

controls: If this attribute appears, controls are displayed to the user, such as a play button.

loop: If this attribute is present, playback will restart whenever the audio ends.

preload: If this attribute appears, the audio will be loaded when the page is loaded and prepared for playback. If "autoplay" is used, this attribute is ignored.

src: URL of the audio to be played.

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

The above example uses an Ogg file and is suitable for Firefox, Opera and Chrome browsers.

To ensure that it works with Safari, the audio file must be of MP3 or Wav type.

The audio element allows multiple source elements. The source element can link different audio files. The browser will use the first recognized format:

<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>

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

Parsing in HTML5

The above is the detailed content of Detailed analysis of audio in HTML5. For more information, please follow other related articles on the PHP Chinese website!

html5 firefox chrome safari html

Statement：

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

Previous article：The road to learning HTML5Next article：The road to learning HTML5

See more

Detailed analysis of audio in HTML5

Related articles