播放音频

是小鹿呀
77 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第1关：HTML5音频相关的概念

相关知识

支持audio元素的音频格式

HTML5使用<audio>元素用来播放音频，目前<audio>元素支持三种音频编码。

  • WAV：为微软公司(Microsoft)开发的一种声音文件格式，采用44.1K的取样频率，16位量化数字，声音文件质量和CD相差无几。
  • MP3：是一种音频压缩技术，用来大幅度地降低音频数据量。将音乐以1:10甚至1:12的压缩率压缩。
  • Ogg：全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，Ogg是完全免费、开放和没有专利限制的，文件扩展名是.OGG。

HTML5音频在浏览器中的支持情况如下图所示：

浏览器对HTML5音频的支持

一般提供ogg和mp3格式，就可以支持所有主流浏览器了。

audio元素及其属性

使用audio元素播放音频，不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <audio src="…" controls="controls"></audio> 在 <audio> 和 </audio>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <audio>标签的浏览器中。 audio元素常用的属性如下：

  • src：规定要播放的音频文件的地址
  • controls：添加该属性，则向用户显示带有播放、暂停和音量调节的控件，不同的浏览器会展示不同样式的控制面板
  • autoplay：添加该属性，可在音频加载完成后自动播放
  • loop：添加该属性，可使音频连续播放
  • preload：用于控制音频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个音频；当取值为metadata时，只载入音频的元数据。

source元素及其属性

<source>标签称为媒体元素，可为浏览器提供多种媒体格式的资源，以兼容用户的浏览器。 source元素的常用属性如下：

  • src：规定要播放的音频文件的地址
  • type:规定媒体资源的MIME类型

用法示例：

<audio controls="controls"> 
    <source type="audio/mpeg" src="Try Everything.mp3">
    <source type="audio/ogg" src="Try Everything.ogg"> 
    您的浏览器不支持 audio 标签。
</audio>

通关知识

1、在下列选项中，（B）不是HTML 5所支持的音频格式。
A、wav
B、voc
C、mp3
D、ogg
​
2、下列选项中，可用来为同一个媒体数据指定多个播放格式与编码方式的标签是（A）。
A、source
B、 audio
C、media
D、embed
​
3、audio元素中src属性的作用是（C）。
A、提供播放、暂停和音量控件
B、循环播放
C、设置要播放音频的URL
D、插入一段替换内容
​
4、给audio标签添加auto属性，可使音频在就绪后马上播放。（B）
A、正确
B、错误
​
5、下列选项中，哪些是Chrome浏览器支持的audio元素的音频文件格式（AC）（此题为多选）
A、mp3
B、ra
C、ogg
D、mid

第2关：播放音频

相关知识

运用audio元素播放音频示例

在HTML5中，使用<audio></audio>标签来播放音频，在该标签中可通过src属性设置音频文件的url，通过controls属性添加播放控件，添加autoplay属性可在音频加载后自动播放。例如：

<audio src="http://music.163.com/song/media/outer/url?id=562598065.mp3" controls="controls" ></audio>

界面效果如下：

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

  1. 使用HTML5的audio元素添加一个音乐播放器，在audio元素的开始和结束标签之间添加说明文字"你的浏览器不支持该音频格式"
  2. 播放的音频文件URL为“www.educoder.net/api/attachm…”
  3. 添加autoplay属性，使音频可以自动播放
  4. 添加loop属性，使音频可以循环播放。

通关代码

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8" />
    <title>HTML5-音频</title>
 </head>
 <body>
   <h1 align="center">安妮的仙境</h1>
   <br/>
   <div align="center">
    <!-- ********* Begin ********* -->
      <audio src="https://www.educoder.net/api/attachments/2364090" autoplay="autoplay" loop="loop" controls="controls">
         你的浏览器不支持该音频格式
      </audio>
    <!-- ********* End ********* -->
    </div>
 </body>
</html>

\

avatar
文章
阅读
粉丝