简单介绍HTML5中audio标签的使用_html5教程技巧
作者：用户
在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式：1.最少的代码复制代码代码如下:&audio src="song.ogg" controls="controls"&&/audio&2.带有不兼容提醒的代码复制代码代码如下:&audio src="song.ogg" controls="c...
在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式：
1.最少的代码复制代码代码如下:&audio src="song.ogg" controls="controls"&&/audio&2.带有不兼容提醒的代码复制代码代码如下:&audio src="song.ogg" controls="controls"&Your browser does not support the audio tag.&/audio&3.尽量兼容浏览器的写法复制代码代码如下:&audio controls="controls"&&source src="song.ogg" type="audio/ogg"&&source src="song.mp3" type="audio/mpeg"&Your browser does not support the audio tag.&/audio&
浏览器和音频兼容性
浏览器制造商并非都同意使用某种音频文件格式。对于图像，PNG、JPEG 或 GIF 格式的文件在任何浏览器上都能加载到您的网页里。遗憾的是，音频文件并非如此。表 1 展示了网页中可以使用的音频文件格式，但是并非所有格式都能用于所有浏览器。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件，这是一种使用非压缩格式且正在衰败的标准。
HTML5浏览器和音频格式兼容性
没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题，而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而，在撰写本文时，Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比，可用的 WAV 和 MP3 文件数量要更多，因此毫无疑问，浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。
解决方案：使用三种文件类型和&audio&标签
鉴于目前的状况，您可能认为目前还不是在 HTML5 页面上使用音频的黄金时刻。在某些方面可能的确如此，但是 HTML5 提供了一个解决方案，使您喜欢的浏览器能够找到一种兼容的格式。
与 &audio& 标签结合使用时，&source& 标签可以嵌套在 &audio& 容器内。假设您是一个瓦格纳迷，想在 HTML5 网页上听他的歌剧 Ride of the Valkyries（《女武神》）。首先，您需要获得三种文件类型的音乐，即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后，将每个文件名放在单独的 &source& 标签里，并且音频容器中的所有源标签都由&audio&&/audio& 构成，如下所示。复制代码代码如下:&audio controls&
&source src=&http://demo.mimvp.com/html5/take_you_fly.ogg& /&
&source src=&http://demo.mimvp.com/html5/take_you_fly.mp3&P /&
&source src=&http://demo.mimvp.com/html5/take_you_fly.wav& /&&/audio&
无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。浏览器音频控件：没有两个是完全相同的一旦您决定要在网站上提供音频，将面临一个有趣的设计选择。每个浏览器都有与众不同的外观，看起来像是有意识地故意使其与众不同。
除了 Chrome 浏览器外，所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件，还显示声音文件的总秒数。使用HTML5 标准和浏览器支持，开发人员可以相信用户将拥有与 HTML5 音频类似的体验，因为浏览器控件是类似的。您还可以使用 Flash 和 Silverlight 等插件创建控件，但是对于不同的用户，体验可能会有所不同。
某些浏览器（如 IE9）甚至有自己的声音控制条，在浏览器本身之外运行。用户打开有声音的任何网站时，他们可以从 Windows 任务栏控制声音，并能够预览当前正在播放的声音。
html代码 (隐藏播放控件)复制代码代码如下:&audio autoplay="autoplay"&&source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"&&/audio&&
代码演示 (隐藏播放控件)复制代码代码如下:&audio autoplay="autoplay" controls="controls"&&source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"&&/audio&
以上是互联网用户为您的的内容，在阿里云内部有更多的关于简单介绍HTML5中audio标签的使用_html5教程技巧的内容，欢迎继续使用右上角搜索按钮进行搜索html5、audio、以便于您获取更多的相关信息。
本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：zixun-group@service.aliyun.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
若您要投稿，删除文章请联系邮箱：zixun-group@service.aliyun.com
工作人员会在5个工作日内回复
html教程栏目为您免费提供
相关信息，包括
的信息 ，所有
相关内容均不代表阿里云的意见！投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员5个工作日内回复。HTML5之Audio音频标签学习-前端开发博客 最新文章
推荐文章 6204Views 8298Views 6434Views 1257Views 637Views热门文章
89,904Views
20,031Views
17,274Views
15,570Views
12,677Views
8,555Views查看更多相关吗？百度搜索：");在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我写了一个M端播放音乐的组件，使用html5的audio标签
然后我使用watch监测currentSong
在浏览器中看到audio渲染的如下：
单独访问渲染出来的audio中url可以播放音乐，为什么调用：this.$refs.audioRef.play()方法不能播放音乐？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
play_mp3_url : function(newUrl){
let _this =
_this.$nextTick(() =& {
_this.$refs.player.play();
用_this变量
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
看看这个issues，作者已经解惑
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。?您当前的位置： >
[html5]html5音频audio标签及视频video标签用法实例
时间: 14:40酷播
一直以来，HTML都没有适合自己的播放标签，而统一采用这样的标签来播放。本文首先从API的角度，对audio和video标签进行了解释和分析，从而帮助大家了解audio和video
audio和video标签的推出，可以说是填补了HTML对音频和视频播放标签的空白。一直以来，HTML都没有适合自己的播放标签，而统一采用&embed&这样的标签来播放。本文首先从API的角度，对audio和video标签进行了解释和分析，从而帮助大家了解audio和video。
audio 标签
audio标签支持HTML页面中的音频，我们可以自由地在HTML页面中嵌入音乐和音频流，下面从4个方面详细介绍audio标签。
1. 检测浏览器是否支持audio标签
无论如何，我们推荐读者在使用新一代HTML5标签的时候，应该检测浏览器的能力，例如下面的代码：
&audio&你的浏览器目前不支持HTML5的audio标签。&/ audio &
如果此浏览器显示了文字&你的浏览器目前不支持HTML5的audio标签&，则说明此浏览器对HTML5的audio标签不支持，反之则支持。
这样的检测方法适用于很多新增闭合标签，无须通过JavaScript脚本去判断。
2. audio标签的相关属性
audio标签的属性与HTML4时代的embed标签有很多类似的地方，应用起来也比较容易，
下面列出audio标签的相关属性：
属性名称 &&& & & &&值的格式&& & & & & & & & &描 述
src & & & & & & & & & &xs:anyURI & & & & & & & &指定音频源文件的URL地址
autoplay & & & & & autoplay & & & & & & & & & 在页面载入时自动播放
loop & & & & & & & & &loop & & & & & & & & & & & & &自动循环播放此标签下指定的文件
controls & & & & & &controls & & & & & & & & & &用户可以对音频进行控制
preload & & & & & & preload & & & & & & & & & & 这是预加载处理属性，只要标签被处理，就会自动加载相关数据。但是如果使用 &autoplay&，则忽略该属性
3. audio标签的浏览器兼容问题
由于目前音频、视频标准尚未在浏览器上获得统一，各个厂商都有自己的立场和态度，而且可能会在较长时间内不会完全统一，因此，我们建议读者采用兼容性写法，这可以有效地覆盖大多数支持音视频标签的浏览器。
&audio controls&
&!--如果浏览器支持ogg格式，则优先使用song.ogg--&
&source src=&song.ogg&&
&!--如果浏览器不支持ogg格式，则降级使用song.mp3--&
&source src=&song.mp3&&
4. 使用audio标签的常见问题
对于audio标签，我们把大家常见的问题归纳如下。
audio标签可以像Flash播放器一样拖动播放吗？
audio标签是可以跳跃播放的。只要直接定位到目标位置，执行播放方法即可。
代码大致如下：
var audio = document.getElementById('audio');//获得audio标签对象
audio.currentPosition; //得到要播放的位置
audio.play();
audio标签有音量控制吗？
audio标签是可以直接调控播放时的音量的，使用方法为audio.volume。
audio标签可以获得音频文件的信息吗？
audio标签是不可以读取音频内容信息的。
audio标签可以进行预读或预载吗？
audio标签是可以进行预载处理的，使用起来也很简单，只需要在标签中加入preload属性即可：
&audio preload&您的浏览器不支持audio标签&/audio&
audio标签可以制造出声音吗？
audio标签是不可以直接操作并制造出新音频内容信息的。
video 标签
HTML5通过video标签直接支持视频的播放，使广大浏览器终于脱离了Flash的枷锁。在Linux和Mac
OS中，对Flash的支持比较差。在非Windows操作系统的环境下，Flash对CPU的消耗是非常巨大的。这是众多非Windows应用者的痛苦经历，虽然最近这种情况有所改善。
另外，虽然移动设备有了广泛应用与普及，但是却没有一个可以完整支持的Flash技术（除Symbian能支持简单的Flash外）。全球最大的视频网站YouTube率先推出了HTML5版，有很多网站为了迎合移动设备全都开发了没有Flash的版本。
1. 检测浏览器是否支持video
与audio标签一样，我们在使用新一代HTML5标签的时候，都应该使用浏览器能力检测标准方法去检测浏览器的能力，比如下面的代码：
&video&你的浏览器目前不支持HTML5的video标签。&/video&
如果此浏览器显示了文字&你的浏览器目前不支持HTML5的video标签&，则说明此浏览器不支持HTML5的video标签，反之则支持。
2. video标签的浏览器兼容性问题
对于人们通常关心的兼容性问题，其实可以用非常简单的办法来实现，本书在这里给出一段进行&优雅降级&的范例代码，供读者思考与借鉴：
&!--如果浏览器支持video，也支持H.264，用movie.mp4--&
&source src=&movie.mp4&&
&!--如果浏览器支持video，仅支持Ogg，用movie.ogv--&
&source src=&movie.ogv&&
&!--如果浏览器不支持video，尝试Flash--&
&object data=&videoplayer.swf& type=&application/x-shockwave-flash&&
&param name=&movie& value=&movie.swf&/&
&!--如果浏览器不支持video，也不支持Flash，给出下载链接--&
&a href=&下载链接&&你的浏览器啥都不支持，只能下载&/a&
3. video的相关属性介绍
属性名称 & & & & & & & &值的格式 & & & & & & & & & & & & & 描 述
src & & & & & & & & & & & & &xs:anyURI & & & & & & & & & & & 指定视频源文件的URL地址
autobuffer & & & & & & &autobuffer & & & & & & & & & & & 允许自动缓冲
autoplay & & & & & & & & autoplay & & & & & & & & & & & & &允许自动播放
loop & & & & & & & & & & & &loop & & & & & & & & & & & & & & & &允许自动循环播放
controls & & & & & & & & controls & & & & & & & & & & & & & 允许用户对视频进行控制
width & & & & & & & & & &cm|em|en|in|px|pt|% & & & 视频图像的显示宽度当高度未指明时，其值将与视频宽度成一定比例
height & & & & & & & & &cm|em|en|in|px|pt|% & & & &视频图像的显示高度。当宽度未指明时，其值将与视频高度成一定比例
poster & & & & & & & & xs:anyURI & & & & & & & & & & & & & 当视频未响应或缓冲不足时，该属性值链接到一个图像。该图像将以一定比例被显示出来
source & & & & & & & &标签格式 & & & & & & & & & & & & & & 这是与video配套的子标签，专门用于描述src属性和源文件的type属性
4. video支持的视频格式
目前，video支持的视频格式还处于变动之中。在对大多数浏览器进行检测后，我们总结了如下3种可以解决工程实际需要的格式。
&Ogg。带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
&MPEG4。带有 H.264 视频编码和 AAC 音频编码的 MPEG-4 文件。
&WebM。带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
5. 通用接口标准
video和audio标签均使用基于抽象HTMLMediaElement的相同DOM接口。
下面介绍了标准的IDL规范接口，方便读者学习控制各种视频及音频流。
loadstart加载开始
浏览器开始寻找媒体数据，作为资源选择算法的一部分
使用前提条件：网络状态为加载状态（NETWORK_LOADING）
progress进度
浏览器获取媒体数据&
使用前提条件：网络状态为加载状态（NETWORK_LOADING）
suspend挂起
浏览器有意不在当前获取媒体数据，但是也不全部下载媒体资源
使用前提条件：网络状态为空闲状态（NETWORK_IDLE）
在媒体数据完全下载完之前，浏览器停止获得媒体数据。这不能归因于一个错误的发生
使用前提条件：错误是一个对象，表示媒体错误终止的MEDIA_ERR_ABORTED代码。此时，网络是处于空载状态，还是处于空闲状态，取决于什么时候下载终止
当取得数据时，错误发生&
使用前提条件：&错误是一个对象，表示媒体错误终止的MEDIA_ERR_NETWORK代码或更高层次的代码。此时，网络是处于空载状态，还是处于空闲状态，取决于什么时候下载终止
emptied空闲
先前网络状态不是处于空载状态的媒体要素刚刚转向了这种状态（或者是因为下载时被报告了一个致命的错误，或者是因为资源选择算法已经运行时，load()方法被调用，这种情况下emptied事件是与load()方法的调用同时发生的）
使用前提条件： 网络状态为空载状态，所有的IDL属性都是初始化状态
stalled迟延
浏览器正在获取数据，但是数据有点出乎意料，没有到来
使用前提条件：网络状态为装载状态（NETWORK_LOADING）
重新播放已经开始。当play()方法返回后，接着播放
使用前提条件：最近的暂停为假
重新播放已被停止。当pause()方法返回后，接着播放
使用前提条件：最近的暂停为真
loadedmetadata装载媒体数据
浏览器决定媒体资源的持续时间和尺度&
使用前提条件：&准备状态最近处于拥有当前的全部数据或第一次装载大于所需数据的状态
loadeddata装载数据
浏览器能够返回的数据位于第一次处于当前重播的位置
使用前提条件：准备状态最近提升到拥有的数据或第一次大于所需的数据的状态
waiting等待
因为不能得到下一个帧，所以重新播放被停止，但是浏览器希望在这个过程中能得到这个架构
使用前提条件：准备状态最近等于或少于当前的数据，暂停则为假。其状态为要么搜索为真，要么当前回放位置不包含在缓冲的数据中
playing正在播放
回放被启动&
准备状态最近等于或多于未来的数据，暂停则为假，搜索也为假；或者当前回放位置包含在缓冲的数据中
canplay能够播放
浏览器能够继续回放媒体数据，但如果回放操作现在就开始的话，不用停下来等待进一步的缓冲，媒体资源则不能以当前的回放速率一直工作到结束
使用前提条件：准备状态最近增加到未来的数据或更多
canplaythrough能够从头到尾播放
如果浏览器现在就开始回放操作的话，媒体资源能以当前的回放速率一直工作，而不用停下来等待进一步的缓冲
使用前提条件：&准备状态最近等于足够的数据
seeking正在寻找
寻找IDL的属性被修改为真，搜索操作用去的时间很长
seeked寻找
寻找IDL的属性被修改为假
timeupdate时间更新
作为正常回放的一部分，当前回放位置被改变；或是以一种有趣的方式进行回放，如间断进行
因为到达了媒体资源的终点，所以回放被停止
使用前提条件：&当前的时间等同于媒体资源结束的时间；结束为真
ratechange交换率
defaultPlaybackRate或是playbackRate属性已被更新
durationchange持续期的交换
duration属性已被更新
volumechange卷交换
volume属性或是muted属性被修改。在相关属性的安装已经返回后，开始工作
6. video存在的问题
Web的多媒体应用前景非常广阔，但是HTML5也有自身的问题：到目前为止，网页上的视频格式标准一直没有统一，苹果公司和微软支持H.264标准（MPEG4），谷歌公司、Mozilla和Opera支持Ogg Theora（Ogg）和WebM。
视频格式标准之争，已经不是一两天的事情了，而且这些争论及其带来的后果已经大大影响了各大平台和开发者对video标签的使用。而采用video标签的平台，必然面临着使用H.264还是使用Ogg的问题，如果两者都使用，又必须对同一个资源文件采用两种格式，由此带来了大量重复的格式转换工作，这恐怕是很多人头疼的问题。
7. Audio Data API&
浏览器厂商对Audio API的扩展是抱有巨大希望的，Mozilla对Audio的研究更加超前，在他们看来，浏览器不仅可以播放声音，还应该可以制造声音。
Data API是 HTML5 规范中的媒体元素 &audio& 与 &video&
的补充功能，它让开发者可以存储和读取音效的外部数据（也有人将之称为后设数据）以及音频本身的原生数据。开发者可以具象化这些音效数据，分析这些数据，甚至创造出新的音效数据。这是对浏览器进行音频领域的一个巨大探索和拓展。
Moz下的事件
&loadedMetadata事件。当一个媒体的数据传至用户计算机的时候，此事件会被触发。它有3个属性，具体如下所示。
& mozChannels。声道的数量。
& mozSampleRate。取样频率（次/秒）。
& mozFrameBufferLength。每次事件所有声道的总样本数。
这些属性下的数据，在解码音频数据流时会用到。
&mozAudioAvailable事件。当播放一个音频源时，音频数据会被传送至音频处理层级而这些内容也会被输入进音频缓冲区（大小取决于mozFrameBufferLength）。当缓冲区被填满的时候，一个mozAudioAvailable事件会被触发。音频的播放、暂停和跳跃都会影响音频数据串流。该事件有两个属性，具体如下所示。
frameBuffer。含有解码后的音频数据（浮点数）的frame缓冲区（一个数组）。（注意：内容不会照对应的声道分隔，而是混在一起，比如一个双声道信号：声道1-内容1，声道2-内容1，声道1-内容2，声道2-内容2，声道3-内容1，声道3-内容2。）
& & time。时间戳，从开始时间计（计量单位：秒）。
下面代码是对上述两个事件进行说明用的源码：
&audio id=&myaudio& src=&song.ogg& controls=&true&&&/audio&
&pre id=&raw&&hello&/pre&
&script type=&text/javascript&&
function loadedMetadata(){
channels = audio.mozC //声道的数量
rate = audio.mozSampleR //取样频率（次/秒）
frameBufferLength = audio.mozFrameBufferL //总样本数
function audioAvailable(event){
var frameBuffer = event.frameB
var t = event.
var text = &当前位置：& + t + &\n&;
text += frameBuffer[0] + & & + frameBuffer[1];
raw.innerHTML =
var raw = document.getElementById('raw');
var audio = document.getElementById('myaudio');
audio.addEventListener('mozAudioAvailable',audioAvailable, false); //对事件进行监听
audio.addEventListener('loadedMetadata',loadedMetadata, false); //对事件进行监听
制造音频流
根据本API，我们可以用JavaScript脚本设定音频流的格式，然后写入音频数据。开发人员只需要建立一个音频对象，然后使用mozSetup()方法来设定声道的数量跟频率（Hz）即可。
下面请看源码：
var testA = new Audio(); //实例化一个audio对象
testA.mozSetup(2,44100); //设定此对象的格式为「双声道，44.1kHz」
var ADU = [0.242, 0.127, 0.0,-0.058,-0.242,...]; //用JavaScript数组来存放声音的数据（当然，
//你也可以使用你熟悉的其他方法来存放声音
var audio_Stream = testA.mozWriteAudio(ADU); //用mozWriteAudio()方法来写入音频流
注意&并不是所有的样本都会被写入串流。函数会回传被写入串流的样本数，这对于下一次要写入数据很好用。
修改音频流
由于mozAudioAvailable
事件与mozWriteAudio()方法都是使用Float32Array传值，因此，把一个音频流的输出直接接上（或是处理过后接上）另一个音频流是可以做到的。办法很简单，只需要修改数组中的内容即可。同时，你也可以做到随时屏蔽、合成、分轨音量和并轨音频等。
8. Web Audio API
此API由Google公司提供，目前的最佳试验环境为Chrome 11及其以上版本的浏览器。
Web Audio API有很多接口：源、参数、缓冲区、进程事件、监听器、放大器、延迟效果、空间效果、折积效果、实时分析、动态比较器、过滤器和声道分离器等。这里根据W3C工作组的翻译文件，略作一些介绍。
&放大器（AudioGainNode）。主要是放大音频效果，它有两个参数，numberOfInputs和numberOfOutputs，只有一个Gain（增益）属性。
&延迟效果（AudioDelayNode）。主要是放大音频效果，它有两个参数，numberOfInputs和numberOfOutputs，只有一个delayTime（延迟时间）属性。
&空间效果（AudioPannerNode）。主要是对维度空间的音频消散计算，包括声音方向、多普勒效应的计算等。
&折积效果（AudioConvolverNode）。主要用于模拟环境的音效。
&实时分析（AudioRealtimeAnalyserNode）。主要是用于快速傅立叶转换，以用于可视化视频。它有5个属性，分别是fftSize、frequencyBinCount、minDecibels、max-Decibels、smoothingTimeConstant。
9. 在Web上制造声音的例子
由于篇幅原因，请访问&&http://www.html5star.com/article-199-1.html&&查看声音制造器演示案例
热门文章推荐
酷播交流2群：(新群）
酷播交流1群：(已满）使用audio标签遇到的两个问题及解决方案 - 简书
使用audio标签遇到的两个问题及解决方案
标签是 HTML 5 的新标签。&audio&标签定义声音，比如音乐各其它音频流
公司的项目需要使用这个标签。在使用的过程中遇到了两个问题：一个是部分手机浏览器无法实现自动播放（同样也无法使用js控制实现自动播放），还有一个是部分浏览器audio标签无法正常响应ended(播放结束)事件，无法获取audio标签的duration属性的值。这里分享一下我的处理方法，希望能够帮助到同样遇到类似问题的同学
1、部分手机浏览器无法实现自动播放
这个现象产生的原因是：部分浏览器考虑了安全问题（偷跑流量），所以必须用户交互后才能播放。
知道了原因那么自然就很好处理了。对于这个问题，网上大多处理方式都是先监听用户的DOM操作，如果事件响应了音频还没有播放，则播放音频。
而我们这边的业务需求，需要一开始就获取自动播放的权限（音频是我们应用的一个关键功能），所以我们的处理方式是页面开始就引导用户点击。
用户点击“开始导游”才能进入内容页面
这里，用户点击之后才能使用我们服务。用户点击之后，我们也就获取到了js控制自动播放的权限了。
如果你们的业务需求无法使用以上方式在一开始就让用户点击、获取播放权限，而且音频并非页面加载完就必须播放（例如背景音乐之类的）。那么可以先判断一下当前浏览器是否支持自动播放，如果支持则页面加载完立即播放音频，如果不支持则监听用户的DOM操作再播放音频。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&audioPlugin Demo&/title&
&script type="text/javascript" src="src/audioPlayPlugin.js"&&/script&
var bgAudio=new audioController();
bgAudio.supportAutoPlay({
src:"file/test1.mp3",
support:playAudio,//支持自动播放，则立即播放音频
nonsupport:function(){ //不支持自动播放，监听到用户点击之后播放音频
document.addEventListener("click",playAudio)
function playAudio(){
bgAudio.play("file/test1.mp3");
document.removeEventListener("click",playAudio); //移除音频自动播放的事件监听
这里我写一个audioPlayPlugin.js,对audio标签的常用操作进行了一些简单的封装。,
2、部分浏览器audio标签不正常响应ended(播放结束)事件，无法获取audio标签的duration属性的值
因为业务需求，我必须监听音频的各种状态（播放中timeupdate、暂停pause、播放结束ended、缓冲waiting）等，但是在部分手机浏览器（例如MIUI的系统浏览器）中监听不了ended事件。也无法获取audio标签的duration属性的值（如果能够获取duration属性的值，就可以通过监听timeupdate事件，判断currrentTime和duration是否相等来模拟ended事件）。
起初看到文章说是 Response Headers的content-type属性值为audio/x-mpeg导致的（浏览器不支持x-mpeg模式），把值设置为audio/mpeg即可。然而，找到后端说了这事儿，他弄了半天把content-type属性值设为audio/mpeg，然而问题并没有解决。
最后我做了一个测试，同一个音频直接放在网站目录下用相对路径就可以正常监听ended事件，也能正常获取duration属性值。生产环境我们的文件是在阿里云上，使用绝对路径。对比了一下headers信息，发现唯一不同的地方就是Status Code不同。能正常监听的Status Code是206，不正常的是200。206是分段加载，具体各种status code可以戳。
第二天，后端主动问我那个问题解决了没。我就说了我的发现，最后后端将音频文件的返回方式调整为206后，问题成功解决。
总结一下：发生这个问题的原因是音频类型文件请求的响应方式不对。其实默认的响应方式就是206，只是我们后端在设置文件响应方式的默认配置时，直接copy了一些配置文件，其实并不知道他修改了音频文件的响应方式。
以上是我使用&audio&标签时遇到的两个问题，和我的解决方案。希望能够帮助到各位同学。
野路子Web前端程序员。
原文链接http://www.cnblogs.com/kenshincui/p/4186022.html 音频在iOS中音频播放从形式上可以分为音效播放和音乐播放。前者主要指的是一些短音频播放，通常作为点缀音频，对于这类音频不需要进行进度、循环等控制。后者指的是一些较长的音...
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
接上 关于HTML/HTML5（一）http://www.jianshu.com/p/33fc 学习HTML5的最佳网站没有之一http://www.w3school.com.cn/html5/index.asp HTML5简介： HTML5 是最新的 HT...
AFNetworking网络请求组件SDWebImage多个缩略图缓存组件FMDB本地数据库组件UICKeyChainStore存放用户账号密码组件Reachability监测网络状态DateTools友好化时间MBProgressHUD一款提示框第三方库MWPhotoBr...
说吃饺子，好多人在好多时候都会说东北饺子好吃。我没吃过纯正的东北饺子，但是吃过东北人在兰州包的兰州东北饺子，确实有和兰州饺子、天水饺子、陇西饺子不一样的味道。我说不清道不明这种饺子的味道，但确实好吃，包括我的小孩吃了也会说“真好吃！”至于到什么程度，看官您自己砸吧嘴去想！ ...
这几天有幸拜访了得一书院，在书院呆了差不多4天，收获满满，手机里面也是存了很多照片和听课的笔记。
呆在书院，和孩子们一起练武、吃饭，感觉特别惬意。到书院第一天，李老师给我们介绍了得一书院的整体的教育理念，以及未来孩子的发展规划。
何为“教育”：如上图，繁体的...
1.在上高中的时候，当时的数学老师也就是我当时的班主任，教学有自己的一套方法，当然教学的效果也是很明显的！其中，最令人佩服的是他上课很少拿课本前来，但对于课本的内容和页码等就像刚看过一样，举例也是手到擒来，也不知道他是怎么做到的！有一次就听他说出了真相，他说从他教学开始，每...
艰难的跨入了第二个季度 经济情况不乐观 健康情况不乐观 恋爱运也没什么改观 大熊猫也还没有去看 如果我真的是94年的就好了 聚餐回家路上 原来公司的同事小组里有人吐槽 预计到今天出新政公司里一定乱成一团 理解不了都是成年人了 出个新政有什么可慌的 幸好我出坑了 标题想不起来...