HTML5 Audio(音频)

HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。


互联网上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。


浏览器支持

8.jpg


Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.


HTML5 Audio - 如何工作

如需在 HTML5 中播放音频,你需要使用以下代码:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
</body>
</html>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件


音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

     浏览器    MP3    Wav    Ogg
Internet Explorer 9+   YES   NO   NO
Chrome 6+   YES   YES   YES
Firefox 3.6+   YES   YES   YES
Safari 5+   YES   YES   NO
Opera 10+   YES   YES   NO

音频格式的MIME类型

    格式     MIME-type
    MP3audio/mpeg
    Oggaudio/ogg
    Wavaudio/wav


HTML5 Audio 标签


     标签     属性
    <audio>定义了声音内容
    
    <source>
规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用




继续学习
||
<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title>php中文网(php.cn)</title>  </head> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> </body> </html>
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载
女神的闺蜜爱上我

女神的闺蜜爱上我

和视频差不多

4年前    添加回复 0

回复
蚂蚁的力量

蚂蚁的力量

有用,真的能放出来声音

4年前    添加回复 0

回复
看山看水看代码

看山看水看代码

能传首歌听听不

4年前    添加回复 0

回复
baby不要哭泣

baby不要哭泣

<source> 元素可以链接不同的音频文件

4年前    添加回复 0

回复
看透不说透

看透不说透

看明白了、没有效果,src应该是写地址的

4年前    添加回复 0

回复
小白

小白

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

4年前 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~