<audio>

HTML <audio> Tag

The <audio> is one of the HTML5 elements added to allow embedding audio files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations of the same audio file. The path to an audio file can contain an absolute or relative URLs. (属性用于指示同一音频文件的变体。音频文件的路径可以包含绝对或相对URL。)

Syntax

Syntax (语法)

The <audio> tag comes in pairs. The content is written between the opening (<audio>) and closing (</audio>) tags.

<audio>
 <source src="URL">
 <source src="URL">
</audio>

Example of the HTML <audio> tag:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls>
     <source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
     <source src="/build/audios/audio.mp3" type="audio/mpeg">
   </audio>
   <p>Click the play button</p>
 </body>
</html>

The Loop Attribute

The Loop Attribute (循环属性)

Using the loop attribute will make the audio file play over and over again:

<audio src="audio.mp3" autoplay loop></audio>

Displaying Browser Controls

Displaying Browser Controls (显示浏览器控件)

You can let the browser display to the user such controls, as volume or play/pause. It is done with the help of controls attribute. (您可以让浏览器向用户显示音量或播放/暂停等控件。它是在控制属性的帮助下完成的。)

<audio src="audio.mp3" controls></audio>

Example of the HTML <audio> tag with the controls attribute:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls src="/build/audios/audio.mp3">
     Your browser does not support the audio element.
(你的浏览器不支持音频插件。)
   </audio>
   <p>Click the play button</p>
 </body>
</html>

Several File Formats

Several File Formats (多种文件格式)

With the <audio> tag you can define multiple formats of the same audio file.

<audio controls>
 <source src="audio.ogg">
 <source src="audio.mp3">
</audio>

Attributes

Attributes (属性)

The <audio> tag has attributes, that indicate the path to the audio file, the way how the audio file should be played, etc. Here the controls, (控制装置) autoplay, (自动) loop and (循环和) muted attributes are used, and their values can be omitted. If the attribute is specified, then by default this function is considered to be enabled. (使用静音属性,可以省略其值。如果指定了属性,则默认情况下此功能被视为已启用。)

AttributeValueDefinition
autoplayPlays the audio file automatically after loading the page.
controlsDisplays the control panel (start button, scroll, volume control). If the controls attribute is missing, the audio file will not be displayed on the page.
loopRepeats continuously the audio file from the beginning after its completion.
mutedMutes the sound when the audio file is played.
preloadDefines what browser should do, if the attribute controls is not specified.
autoPlayback starts after the page is loaded.
metadataTells the browser to upload a small portion of the file to determine its main characteristics: (for example, file size).
nonePlayback starts only after clicking the corresponding button.
srcURLSpecifies the path to the audio file.

The <audio> tag supports the Global Attributes and the Event Attributes.



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部