html中的audio

audio支持wav、mp3、ogg、acc、webm等格式，每个浏览器因为版权问题支持的格式都不一样

浏览器对audio的支持情况

音频格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持

没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题，而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而，在撰写本文时，Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比，可用的 WAV 和 MP3 文件数量要更多，因此毫无疑问，浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。

解决方案

HTML5 提供了一个解决方案，使您喜欢的浏览器能够找到一种兼容的格式。

与 <audio> 标签结合使用时，<source> 标签可以嵌套在 <audio> 容器内。首先，您需要获得三种文件类型的音乐，即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后，将每个文件名放在单独的标签里，并且音频容器中的所有源标签都由构成，如下所示

<audio controls><source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” /><source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ /><source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

audio的属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
volume	设置或返回音频的音量。

audio的方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

audio的监听事件

事件	描述
loadstart	当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时
durationchange	当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。
loadedmetadata	当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
progress	当浏览器正在下载指定的音频/视频时，会发生 progress 事件。
suspend	该事件在媒体数据被阻止加载时触发。可以是完成加载后触发，或者因为被暂停的原因。
loadeddata	当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件
canplay	当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。
canplaythrough	当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。
play	开始播放时触发
playing	开始回放
timeupdate	播放时间改变这个会一直打印
pause	暂停时会触发，当播放完一首歌曲时也会触发
ended	当播放完一首歌曲时也会触发
abort	客户端主动终止下载（不是因为错误引起）
error	请求数据时遇到错误
stalled	网速失速
waiting	等待数据，并非错误
seeking	寻找中
seeked	寻找完毕
ratechange	播放速率改变
volumechange	音量改变

// 例
audio.addEventListener("timeupdate", function () { // 播放时间改变   这个会一直打印console.log("event timeupdate: ", audio.currentTime);
});

html中的audio相关推荐

chorme vue中使用audio自动播放问题
我这里是将audio文件放在static文件夹中,vue页面中直接引用: <audio class="audio" src="./static/audio/alar ...
vue提示音_vue中使用audio标签进行消息提示
本文实现的功能是:有新的消息更新时,页面会播放提示音,提示的声音会播放15秒,然后停止播放,如果在停止播放之前又有新的消息进来,则会重新计时15秒. 首先,添加audio标签,引入资源文件. 在aud ...
html中的audio标签
1.audio标签用来向引入一个外部的音频文件.音频文件引入时,默认情况下不允许用户自己控制播放停止. 2.属性: controls 是否允许用户控制播放. autoplay 音频文件是否自动播放.如 ...
html audio 路径,HTML中的audio和video标签讲解
关于标签讲解:点击这里这里来一段简单的html5的音频代码: 您的浏览器不支持 audio 标签. 在audio标签中加入的文字,可以让浏览器在不支持audio标签的时候显示出提示文字. Inter ...
HTML5中的audio在手机端和微信端的不能自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的通常解决方法是给一个交互事件: 标签: <audio loop ...
HTML5中的audio在手机端和微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的通常解决方法是给一个交互事件,一定要是交互事件标签:<aud ...
html支持的语音文件格式,html5中如何设置audio支持音频格式
html5中如何设置audio支持音频格式发布时间:2020-04-15 10:24:37 来源:亿速云阅读:367 作者:小新今天小编给大家分享的是html5中如何设置audio支持音频格式, ...
Android中Audio框架
原址原文链接 Android中的音频硬件抽象层(HAL)连接android.media中高层的,特定音频框架API到底层的音频驱动和硬件下列图表描述了音频功能是如何实现的,以及相关实现的相关源代码 ...
Audio Unit: iOS中最底层最强大的音频控制API
阅读的前提: Audio Session基础(Audio Session) Core Audio基本数据结构(Core Audio) 音视频基础知识 C/C++ 简单数据结构,函数使用以下概念是文中 ...