好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

HTML5音频Audio对象属性方法事件总结

缘起:迷津音乐播放器,一个原生Javascript和纯OOP的HTML5播放器完成。

获取Audio对象的方法

通过DOM里面的audio标签

<audio id="audioObj"></audio>

定义HTML的audio标签后通过getElementById等获取对象:

var audioObj=document.getElementById('audioObj');

通过new直接实例化Audio对象

var audioObj=new Audio();

一般音乐播放器都使用第二种方法实例化对象。


两种方法获得的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 事件。

当音频加载后,时长将由 "NaN" 变为音频的实际时长。

loadedmetadata

当指定的音频的元数据已加载时,会发生 loadedmetadata 事件。

音频的元数据包括:时长以及文本轨道。

loadeddata
当当前帧的数据已加载,但没有足够的数据来播放指定音频的下一帧时,会发生 loadeddata 事件。
progress
当浏览器正在下载指定的音频时,会发生 progress 事件。
canplay
当浏览器能够开始播放指定的音频时,发生 canplay 事件。
canplaythrough当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频时,会发生 canplaythrough 事件。


点赞2
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
bisnistrading
 bisnistrading 约 12 小时前回复
#218
<a href="http://www.htpmimoza.com/cleveland-indians-gray-jersey-nfli">cleveland indians gray jersey</a> <a href="http://www.ayakkabiyeri.com/nike-magista-opus-tpu-fg-dark-citron-verde-zapatosh">nike magista opus tpu fg dark citron verde</a> <a href="http://www.sozoteki.com/nike-free-5.0-hombres-gris-fluorescent-amarillo-zapatosk">nike free 5.0 hombres gris fluorescent amarillo</a> <a href="http://www.njforward.com/the-north-face-womens-venture-jacket-sale-northfaceh">the north face womens venture jacket sale</a> <a href="http://www.crimediainc.com/converse-turnschuhe-gr%C3%BCn-schuhek">converse turnschuhe gr眉n</a> <a href="http://www.claybrookpenn.com/nike-air-max-2017-m%C3%A6nd-sort-hvid-skoi">nike air max 2017 m忙nd sort hvid</a>
bisnistrading http://www.bisnistrading.com/
mybancorphsa
 mybancorphsa 约 13 小时前回复
#217
<a href="http://www.unefinemouche.com/north-face-jacket-blue-jd-northfaceh">north face jacket blue jd</a> <a href="http://www.ayuinc.com/dam%C3%A4nner-nike-sb-stefan-janoski-max-orangen-gold-schuhej">dam盲nner nike sb stefan janoski max orangen gold</a> <a href="http://www.unirlisboa.com/adidas-neo-canvas-r%C3%B8d-lilla-skoh">adidas neo canvas r酶d lilla</a> <a href="http://www.escortfeeds.com/adidas-tubular-runner-jaune-gris-chaussuresh">adidas tubular runner jaune gris</a> <a href="http://www.rdjanitorial.com/san-diego-padres-new-era-mlb-team-out-heather-59fifty-cap-hatl">san diego padres new era mlb team out heather 59fifty cap</a> <a href="http://www.bookoobeats.com/nike-kd-8-hommes-gris-chaussuresh">nike kd 8 hommes gris</a>
mybancorphsa http://www.mybancorphsa.com/
xinyudaili
 xinyudaili 2019-05-18 12:33回复
#216
<a href="http://www.chocopictures.com/north-face-gore-tex-trail-shoes-northfaceh">north face gore tex trail shoes</a> <a href="http://www.baluntan.com/nike-free-run-5.0-sapphire-blue-shoesh">nike free run 5.0 sapphire blue</a> <a href="http://www.anderonedream.com/chaussures-nike-air-max-olive-vert-chaussuresl">chaussures nike air max olive vert</a> <a href="http://www.variaponsel.com/nike-kd-9-wolf-grey-shoesj">nike kd 9 wolf grey</a> <a href="http://www.allmydibs.com/golden-state-warriors-new-era-nba-iridescent-stripe-9fifty-snapback-cap-hatk">golden state warriors new era nba iridescent stripe 9fifty snapback cap</a> <a href="http://www.macusaa.com/adidas-pr%C3%B8dator-instinct-sort-r%C3%B8d-skoj">adidas pr酶dator instinct sort r酶d</a>
[url=http://www.xinyudaili.com/]xinyudaili[/url]
womens og 6 jordans
 womens og 6 jordans 2019-05-18 00:04回复
#215
<a href="http://www.sahafatona.com/bhm/100-algod%c3%b3n-ocasional-boina-de-visera-para-hombres-marca-moda-retro-casquillos-planos-ajustable-bot%c3%b3n">100 algod贸n ocasional boina de visera para hombres marca moda retro casquillos planos ajustable bot贸n</a><a href="http://www.sahafatona.com/bird/macac%c3%a3o-de-plush-kids-by-kilo">macac茫o de plush kids by kilo</a><a href="http://www.sahafatona.com/cable/chap%c3%a9u-t%c3%a3o-estilosos-e-t%c3%a3o-pouco-utilizado-ellegancy-costuras">chap茅u t茫o estilosos e t茫o pouco utilizado ellegancy costuras</a><a href="http://www.sahafatona.com/can/polo-feminina-da-ralph-lauren-roupas-e-cal%c3%a7ados-jardim">polo feminina da ralph lauren roupas e cal莽ados jardim</a>
womens og 6 jordans http://www.abegmusicx.com/visible/womens-og-6-jordans
eistyles
 eistyles 2019-05-17 01:08回复
#214
<a href="http://www.zeraxia.com/adidas-ultra-boost-schwarz-3.0-schuhei">adidas ultra boost schwarz 3.0</a> <a href="http://www.turisim.com/adidas-samba-fl%C3%A5den-bl%C3%A5-and-hvid-skoh">adidas samba fl氓den bl氓 and hvid</a> <a href="http://www.sybelite.com/nike-mens-baltimore-ravens-customized-white-game-jersey-nfli">nike mens baltimore ravens customized white game jersey</a> <a href="http://www.lemodemo.com/rosa-adidas-sko-gazelle-obuvk">rosa adidas sko gazelle</a> <a href="http://www.fskanglipu.com/cream-colored-coach-purse-coachh">cream colored coach purse</a> <a href="http://www.tekmenu.com/maschio-nike-blazer-bianca-scarpej">maschio nike blazer bianca</a>
eistyles http://www.eistyles.com/
scopatore
 scopatore 2019-05-15 11:51回复
#213
<a href="http://www.sugarforspice.com/nike-kobe-11-flyknit-gr%C3%B8nn-gr%C3%A5-obuvk">nike kobe 11 flyknit gr酶nn gr氓</a> <a href="http://www.mybancorphsa.com/womens-nike-roshe-run-speckle-black-pink-shoesi">womens nike roshe run speckle black pink</a> <a href="http://www.scopatore.com/kvinders-air-jordan-retro-14-appelsin-guld-skoj">kvinders air jordan retro 14 appelsin guld</a> <a href="http://www.galacticlogos.com/nike-free-hypervenom-mid-svart-gr%C3%A5-obuvi">nike free hypervenom mid svart gr氓</a> <a href="http://www.ispardmore.com/nike-lunar-tr1-hvit-deep-royal-bl%C3%A5-obuvk">nike lunar tr1 hvit deep royal bl氓</a> <a href="http://www.radioramabc.com/mennns-nike-roshe-run-hyp-gr%C3%B8nn-hvit-obuvi">mennns nike roshe run hyp gr酶nn hvit</a>
scopatore http://www.scopatore.com/
erstube
 erstube 2019-05-15 11:34回复
#212
<a href="http://www.profancyshop.com/nike-roshe-sort-wolf-gr%C3%A5-skoj">nike roshe sort wolf gr氓</a> <a href="http://www.lmcgroep.com/air-jordan-retro-4-gamma-bl%C3%A5-gull-obuvi">air jordan retro 4 gamma bl氓 gull</a> <a href="http://www.nowaitnails.com/mennns-air-max-lunar-90-gull-lilla-obuvk">mennns air max lunar 90 gull lilla</a> <a href="http://www.xmrujo.com/kvinners-nike-air-max-zero-all-lilla-obuvi">kvinners nike air max zero all lilla</a> <a href="http://www.sevenguard.com/mujeres-air-jordan-7-verde-zapatosk">mujeres air jordan 7 verde</a> <a href="http://www.escortsue.com/coach-sunglasses-made-in-china-coachh">coach sunglasses made in china</a>
erstube http://www.erstube.com/
adanastarpen
 adanastarpen 2019-05-15 10:49回复
#211
<a href="http://www.romoautocare.com/michael-kors-jet-set-signature-tote-bag-mkh">michael kors jet set signature tote bag</a> <a href="http://www.industrialegy.com/kvinners-nike-kyrie-2-r%C3%B8d-oransje-obuvi">kvinners nike kyrie 2 r酶d oransje</a> <a href="http://www.bewustvitaal.com/femminile-nike-air-huarache-light-rosa-viola-scarpej">femminile nike air huarache light rosa viola</a> <a href="http://www.flushandhunt.com/nike-air-max-tailwind-5-green-purple-shoesh">nike air max tailwind 5 green purple</a> <a href="http://www.kendalfewster.com/mujeres-nike-zoom-pegasus-33-negro-amarillo-zapatosk">mujeres nike zoom pegasus 33 negro amarillo</a> <a href="http://www.gisusalon.com/adidas-harden-azul-blanco-zapatosp">adidas harden azul blanco</a>
adanastarpen http://www.adanastarpen.com/
alecsblog
 alecsblog 2019-05-13 10:13回复
#210
<a href="http://www.mandydugan.com/nike-free-run-3-cielo-azul-negro-zapatosk">nike free run 3 cielo azul negro</a> <a href="http://www.dxnkofe.com/gore-tex-the-north-face-summit-series-northfaceh">gore tex the north face summit series</a> <a href="http://www.yurasmirnov.com/nike-zoom-structure-20-dam%C3%A4nner-gelb-wei%C3%9F-schuhej">nike zoom structure 20 dam盲nner gelb wei脽</a> <a href="http://www.blovese.com/nike-flyknit-lunar-3-appelsin-gr%C3%A5-skoh">nike flyknit lunar 3 appelsin gr氓</a> <a href="http://www.ztsurfboards.com/nike-lunar-tr1-oregon-jaune-chaussuresh">nike lunar tr1 oregon jaune</a> <a href="http://www.visheshcap.com/ottawa-senators-fitted-hat-hatl">ottawa senators fitted hat</a>
alecsblog http://www.alecsblog.com/
bezpozyczka
 bezpozyczka 2019-05-11 00:38回复
#209
<a href="http://www.ankaraoyunevi.com/completely-blanco-converse-zapatosl">completely blanco converse</a> <a href="http://www.iotlsebring.com/nike-dunk-green-yellow-shoesk">nike dunk green yellow</a> <a href="http://www.joshsingleton.com/adidas-ultra-boost-kvinner-core-svart-obuvi">adidas ultra boost kvinner core svart</a> <a href="http://www.amesecolombia.com/nike-free-run-3.0-v4-kvinner-lime-gr%C3%B8nn-gr%C3%A5-obuvk">nike free run 3.0 v4 kvinner lime gr酶nn gr氓</a> <a href="http://www.flatshotgame.com/nike-dunk-low-sb-hvit-obuvi">nike dunk low sb hvit</a> <a href="http://www.myrumpun.com/hombres-adidas-springblade-drive-2.0-naranja-gris-zapatosl">hombres adidas springblade drive 2.0 naranja gris</a>
bezpozyczka http://www.bezpozyczka.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸