HTML`audio`标签

The audio tag allows you to embed audio content in your HTML pages.

audio标签允许您将音频内容嵌入HTML页面。

This element can stream audio, maybe using a microphone via getUserMedia(), or it can play an audio source which you reference using the src attribute:

该元素可以通过getUserMedia()使用麦克风来流音频，或者可以播放您使用src属性引用的音频源：

<audio src="file.mp3" />

By default the browser does not show any controls for this element. Which means the audio will play only if set to autoplay (more on this later) and the user can’t see how to stop it, or control the volume or move through the track.

默认情况下，浏览器不显示此元素的任何控件。 这意味着只有设置为自动播放(稍后会详细介绍)并且用户看不到如何停止音频，控制音量或在轨道上移动时，音频才会播放。

To show the built-in controls, you can add the controls attribute:

要显示内置控件，可以添加controls属性：

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

Controls can have a custom skin.

控件可以具有自定义外观。

You can specify the MIME type of the audio file using the type attribute. If not set, the browser will try to automatically determine it:

您可以使用type属性指定音频文件的MIME类型。 如果未设置，浏览器将尝试自动确定它：

<audio src="file.mp3" controls type="audio/mpeg" />

An audio file by default does not play automatically. Add the autoplay attribute to play the audio automatically:

默认情况下，音频文件不会自动播放。 添加autoplay属性以自动播放音频：

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

Note: mobile browsers don’t allow autoplay

注意：移动浏览器不允许自动播放

The loop attribute restarts the audio playing at 0:00 if set, otherwise if not present the audio stops at the end of the file:

如果设置了loop属性，则从0:00开始重新播放音频；否则，如果音频不存在，则音频在文件末尾停止：

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

You can also play an audio file muted using the muted attribute (not really sure what’s the usefulness of this):

您也可以使用muted属性播放静音的音频文件(不十分确定这有什么用)：

<audio src="file.mp3" controls autoplay loop muted />

CORS (CORS)

Audio is subject to CORS and unless you allow it on the server side, an audio file can’t be played cross-origin.

音频受CORS的约束，除非您在服务器端允许音频，否则无法跨源播放音频文件。

预加载音频 (Preloading the audio)

If you don’t set autoplay, the spec says that browsers will only download the audio metadata (to find out the length, for example) but will not download the audio itself.

如果未设置autoplay ，那么规范将规定浏览器将仅下载音频元数据(例如，找出长度)，而不会下载音频本身。

You can force preloading the audio using

您可以使用以下命令强制预加载音频

<audio src="song.mp3" preload="auto" />

如果不支持audio则显示内容 (Displaying content if audio is not supported)

The audio tag is very well supported, up to IE9, so nowadays there should be no need to have a placeholder text, but we have this option. You just add a closing tag, and insert text between the opening and closing tag:

直到IE9为止， audio标签都得到了很好的支持 ，因此，如今无需使用占位符文本，但是我们有此选项。 您只需添加一个结束标记，然后在开始标记和结束标记之间插入文本：

<audio src="song.mp3">Audio tag not supported</audio>

添加本机控件 (Adding native controls)

Instead of autoplaying the audio in the background, you can choose to ask the browser display a set of controls to let the user play the audio when they want, have some indication of the length, set the volume and let them navigate the track:

您可以选择让浏览器显示一组控件，以使用户在需要时播放音频，指示长度，设置音量并让他们浏览曲目，而不是在后台自动播放音频：

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

This is how it looks in Chrome:

这是在Chrome中的外观：

You can style controls using CSS, although this is out of the scope for this introduction.

您可以使用CSS设置控件的样式，尽管这不在本介绍的范围之内。

添加多个来源 (Adding multiple sources)

Browsers can implement one audio codec but not another. Maybe you want to use a newer standard which cuts file size in half but you still want to support older browsers.

浏览器可以实现一个音频编解码器，但不能实现另一种。 也许您想使用一个新的标准将文件大小减少一半，但是您仍然希望支持旧的浏览器。

You do so with the source tag:

您可以使用source标签：

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

处理音频事件 (Working with audio events)

We can listen for events on each audio element using JavaScript, to create interesting projects and interfaces. There is a lot of different events to play with.

我们可以使用JavaScript侦听每个audio元素上的事件，以创建有趣的项目和接口。 有很多不同的事件可以玩。

The play event is fired when the audio playback starts:

音频播放开始时将触发play事件：

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

You can also directly add this event (as the others) using the on<event> attribute directly on the HTML element:

您还可以直接在HTML元素上使用on<event>属性直接添加此事件(与其他事件一样)：

<audio src="song.mp3" controls onplay="playing()" />

const playing = () => {
  alert('Audio is playing!!!')
}

These are a few events you can listen to:

这些是您可以听的一些事件：

• play audio started playing

  play音频开始播放

• pause audio was paused

  pause音频已暂停

• ended audio playing completed

  ended音频播放完毕

• timeupdate the user interacted with the playback timeline and went forward/backwards

  timeupdate用户与播放时间轴交互并前进/后退

• volumechange the user changed the volume

  volumechange用户更改了音量

There are a lot more events related to the audio loading, and you can find the full list on MDN.

还有许多与音频加载相关的事件， 您可以在MDN上找到完整列表 。

翻译自: https://flaviocopes.com/html-audio-tag/