HTML5音频audio详解

简介: 直到现在,仍然不存在一项旨在网页上播放音频的标准。<br> 目前,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。<br> HTML5 规定了一种通过 audio 元素来包含音频的标准方法。<br> audio 元素能够播放声音文件或者音频流。<br><p><strong>当前,audio 元素支持三种音频格式</strong>:</p> <
直到现在,仍然不存在一项旨在网页上播放音频的标准。
目前,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。

当前,audio 元素支持三种音频格式

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    
开发例子源码如下

<!DOCTYPE HTML>
<html>
<body>
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,对 audio 元素的支持。
<audio controls="controls" autoplay="autoplay">
  <source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
  <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
你的浏览器不支持html5的audio标签
</audio>
</body>
</html>
解释:
1、control 属性供添加播放、暂停和音量控件。
2、<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。
3、audio 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
支持的部分属性列举:
4、autoplay 是否自动播放。
属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。
欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!
目录
相关文章
|
14天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
2月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 030 HTML音频
编程笔记 html5&css&js 030 HTML音频
|
10月前
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
155 0
|
5月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
48 0
|
6月前
|
移动开发 HTML5
HTML5之audio标签介绍
HTML5之audio标签介绍
34 1
|
11月前
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
|
移动开发 前端开发 JavaScript
前端祖传三件套HTML的HTML5之新多媒体元素 audio/video
HTML5 是 Web 技术的重要更新,它引入了许多新特性,其中包括一些新的多媒体元素。这些新元素包括音频和视频,让 Web 开发者可以更方便地在网站上添加多媒体内容。
121 0
HTML 学习笔记——插入音频、视频标签
audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时,默认情况下不允许用户自己控制播放按钮。
94 0
|
移动开发 HTML5
HTML5中的audio在手机端和微信端的不能自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的
|
移动开发 HTML5
html5中audio属性和方法
<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条
155 0