HTML 元素：audio

该<audio>元素允许您将音频内容（如歌曲、音效或播客）直接嵌入到您的网页中。

它于 2014 年作为 html5 规范的一部分被引入 html。

语法

该<audio>元素需要一个开始和结束标签。您可以通过一条src路径：

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

或其他嵌套源元素，如果您需要支持多种音频格式。

1    <audio>    
2      <source src="soundtrack.mp3 "type="audio/mpeg">    
3      <source src="soundtrack.ogg "type="audio/ogg">    
4    </audio>

例子

下面是一个示例，说明如何使用该<audio>元素将单个音频文件嵌入到您的网页中：

1    <audio controls>    
2      <source src="file.mp3 "type="audio/mpeg">    
3      Your browser does not support the audio element.    
4    </audio>

效果

安迪·斯莱特 (Andy Slatter) 创作的夏威夷四弦琴曲目。

See the Pen  HTML Element: audio by Envato Tuts+ (@tutsplus)  on CodePen.

属性

以下是 <audio> 元素的一些最常用的属性：

• src– 指定要播放的音频文件的 URL。

• controls– 添加基本的播放控件，如播放、暂停和音量。

• autoplay– 页面加载时自动开始播放音频文件。

• loop– 循环播放音频文件，使其不断重复。

• muted– 开始静音播放音频。

• preload– 指定是否应预加载音频。

内容

该<audio>元素没有任何特定的内容要求，但重要的是<source>在该元素内至少包含一个元素<audio>以确保跨浏览器的兼容性。这是一个例子：

1    <audio>    
2      <source src="reel.mp3" type="audio/mpeg">     
3      <source src="reel.ogg" type="audio/ogg">    
4      Your browser does not support the audio element.    
5    </audio>

此示例包括两种不同的音频文件格式MP3和Ogg Vorbis，以及针对不支持该<audio> 元素的浏览器的回退消息。

内容可以在音频元素内提供，但它适用于不支持该audio元素的旧版浏览器。

浏览器渲染和样式

目前没有标准的 css 用于设置<audio>播放器中各种 UI 控件的样式。

有许多伪类，例如:playing和:paused，它们允许根据玩家状态以非常有限的方式进行样式设置，但支持很差。

还有一些伪类可以与浏览器前缀一起使用，但同样，采用是有问题的。

以下是主流浏览器<audio>默认呈现元素的方式：

火狐：

微软边缘：

铬合金：

苹果浏览器:

你可知道？

• 您可以使用 javascript 来控制音频文件的播放，例如play()和pause()方法。您可以利用许多事件来为最终用户提供更多控制。

• 该<audio>元素可用于创建基于音频的动画，如音频可视化或声波动画。