[HTML]audio音频标签的属性和事件

/ 65,216评论 / 311251阅读 / 2点赞

<audio>是HTML5新加入的用于播放音频的标签,HTML5已经得到广泛的支持,所以我们可以放心使用这个标签;利用它,可以轻松地在网页上播放音频,制作音乐播放器等。下面我们来聊聊它的属性和事件

概念

元数据


属性

兼容性提示

<audio>
  能看到这段话,说明您的浏览器不支持 audio 标签捏
</audio>

controls默认音乐控制面板

<audio controls>
  能看到这段话,说明您的浏览器不支持 audio 标签捏
</audio>
<audio controls="controls">
  能看到这段话,说明您的浏览器不支持 audio 标签捏
</audio>

src音频文件链接

<audio src="./song.mp3" controls>
  能看到这段话,说明您的浏览器不支持 audio 标签捏
</audio>

source资源文件标签


<audio controls>
    <source src="./song.ogg" type="audio/ogg">
    <source src="./song.mp3" type="audio/mpeg">
    能看到这段话,说明您的浏览器不支持 audio 标签捏
</audio>

autoplay自动播放

<audio autoplay>
  您的浏览器不支持 audio 标签捏
</audio>
<audio autoplay="autoplay">
  您的浏览器不支持 audio 标签捏
</audio>

loop开启循环

<audio loop src="./song.mp3">
  您的浏览器不支持 audio 标签捏
</audio>

muted静音

<audio muted src="./song.mp3">
  您的浏览器不支持 audio 标签捏
</audio>

preload预加载方式

<audio preload="auto" src="./song.mp3">
  您的浏览器不支持 audio 标签捏
</audio>

JS操作属性

只读

这部分属性只能读取,不能进行赋值修改

duration音频总时长

const audioDOM = document.getElementById("audio");
if (isNaN(audioDOM.duration)) {
    // 未加载时的操作
} else {
    // 已加载时的操作
}

paused是否暂停

const audioDOM = document.getElementById("audio");
if (audioDOM.paused == true) {  //如果是暂停状态
    audioDOM.play();  //播放音频
} else {              //如果正在播放
    audioDOM.pause(); //暂停
}

ended是否播放完毕

currentSrc音频链接

buffered已缓存范围

let audio = document.getElementById("audio");
let timeRanges = audio.buffered;
let num = 0;
/*获取已加载时长,然后除以歌曲时长,即可得到已加载比例*/
if(timeRanges.length > 0)
    num = parseInt(timeRanges.end(timeRanges.length - 1) * 100 / audio.duration);
if (num > 100)
    num = 100;
else if (num < 0)
    num = 0;

seekable可跳转范围

networkState网络范围

error发生错误

seeking是否移动或跳转播放进度

<audio id="audio" controls src="song.mp3" onseeking="seeking">
  您的浏览器不支持 audio 标签捏
</audio>

<script>
seeking:function(){
    const audioDOM = document.getElementById("audio");
    console.log(audioDOM.seeking);
}
</script>

可读写

这部分属性可以读取,也可以赋值修改

currentTime已播放时长

const audioDOM = document.getElementById("audio");
if (audioDOM.currentTime > 5) {
    audioDOM.currentTime -= 5;
} else {
    audioDOM.currentTime = 0;
}

volume音量

const audioDOM = document.getElementById("audio");
if (audioDOM.volume < 0.9) {
    audioDOM.volume += 0.1;
} else {
    audioDOM.volume = 1;
}

playbackRate播放速度

const audioDOM = document.getElementById("audio");
if (audioDOM.playbackRate >= 2)
    audioDOM.playbackRate = 0.5;
else
    audioDOM.playbackRate += 0.25;

标签属性控制

以下属性都会返回布尔值boolean,可读写设置对应的标签属性是否启用

const audioDOM = document.getElementById("audio");
audioDOM.controls = true;
if(audioDOM.loop == false){
    audioDOM.loop = true;
}

JS操作函数

play()播放

const audioDOM = document.getElementById("audio");
if (audioDOM.canPlay == true) {   //如果资源准备好可以播放
    if (audioDOM.paused == true)  //音频为暂停状态
        audioDOM.play();    //播放
    else
        audioDOM.pause();   //暂停
}

pause()暂停

load()加载


事件

加载生命周期

loadstart开始加载

durationchange时长改变

loadedmetadata元数据加载完毕

loadeddata数据开始加载

progress加载中

canplay可以播放

canplaythrough可以播放整个音频

其他事件

timeupdate已播放时长更新

waiting等待资源中

playing播放中

play播放

pause暂停

ended结束

volumechange音量改变

ratechange播放速率改变

error发生错误

  1. Cazrxwz说道:

    Быстрое обучение и получение диплома магистра – возможно ли это?
    mdou70.68edu.ru/wp-content/pgs/gde_kupit_diplom_bez_predoplatu_bezopasno_i_bustro

  2. 1win вход说道:

    наслаждайтесь победой!
    1win casino – ваш путь к успеху в азартных играх, доверьтесь только профессионалам!
    Попробуйте свою удачу в увлекательных играх 1win casino, не упустите свой шанс на крупный выигрыш!
    1win casino – место, где сбываются мечты, выигрывайте с каждой ставкой!
    Станьте частью захватывающего мира азарта в 1win casino, не упустите свой шанс на крупный выигрыш!
    1win casino – ваш лучший выбор для азартных игр, выигрывайте и наслаждайтесь победой!
    Играйте и выигрывайте с нами в 1win casino, выигрывайте крупные суммы и радуйтесь успеху!
    1win casino – ваш выбор номер один для азартных игр, играйте и побеждайте с нами!
    Присоединяйтесь к азартному миру 1win casino, не упустите шанс выиграть крупный джекпот!
    1win casino – ваш путь к большим деньгам и успеху, играйте и побеждайте с 1win casino!
    Станьте частью захватывающего мира азарта в 1win casino, не упустите свой шанс на крупный выигрыш!
    1win casino – ваш путь к большим деньгам и успеху, выигрывайте и наслаждайтесь победой!
    Играйте и выигрывайте с нами в 1win casino, выигрывайте крупные суммы и наслаждайтесь успехом!
    1win casino – ваш ключ к миру азартных развлечений, наслаждайтесь своими победами вместе с 1win casino!
    Присоединяйтесь к азартному миру 1win casino, выигрывайте крупные суммы и наслаждайтесь успехом!

    1win бонусы 1win вход .

  3. Eanryqh说道:

    Привет, друзья!
    Мы изготавливаем дипломы психологов, юристов, экономистов и других профессий по разумным тарифам.
    spbmedu.ru/index

  4. Williamtok说道:

    Здравствуйте!
    Мы изготавливаем дипломы.
    inkbunny.net/j/507588-ruhfhshj–

  5. топ лучших ставок на спорт http://www.rejting-kapperov14.ru .

  6. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en buyuk hos geldin bonuslar?n? alarak kazanmaya baslayabilir. En sevilen slotlar Sahabet’te kazananlar?n? bekliyor. En yuksek bonuslar? toplay?n ve ilk depozitoda buyuk avantajlar kazan?n. Sahabet, buyuk oduller sunan kumarhane olarak dikkat cekiyor.

    2024\’un en karl? kumarhanesi – Sahabet Sahabet .

  7. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak kazanmaya baslayabilir. Kazand?ran slotlar Sahabet’te buyuk kazanclar sunuyor. En yuksek bonuslar? toplay?n ve 500% bonus elde edin. Sahabet, yeni y?lda kazand?ran kumarhane olarak dikkat cekiyor.

    2024\’un en karl? kumarhanesi – Sahabet Sahabet .

  8. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, essiz f?rsatlar? alarak kazanmaya baslayabilir. Populer slot oyunlar? Sahabet’te kazananlar?n? bekliyor. Sans?n?z? simdi deneyin ve 500% bonus elde edin. Sahabet, yeni y?lda kazand?ran kumarhane olarak dikkat cekiyor.

    Populer slotlar Sahabet casino\’da kazananlar?n? bekliyor Sahabet .

  9. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en buyuk hos geldin bonuslar?n? alarak kazanmaya baslayabilir. En sevilen slotlar Sahabet’te kazananlar?n? bekliyor. Bu f?rsat? kac?rmay?n ve ilk depozitoda buyuk avantajlar kazan?n. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.

    Gidin ve casino depozitonuzda +%500 kazan?n – Sahabet Sahabet .

  10. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak oyuna kat?labilir. Populer slot oyunlar? Sahabet’te kazananlar?n? bekliyor. Bu f?rsat? kac?rmay?n ve ilk depozitoda buyuk avantajlar kazan?n. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.

    Gidin ve casino depozitonuzda +%500 kazan?n – Sahabet Sahabet .

  11. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, essiz f?rsatlar? alarak kazanmaya baslayabilir. Populer slot oyunlar? Sahabet’te en iyi odullerle dolu. Sans?n?z? simdi deneyin ve depozitonuza +%500 kazan?n. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.

    Gidin ve casino depozitonuzda +%500 kazan?n – Sahabet Sahabet .

  12. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak oyun keyfini c?karabilir. Populer slot oyunlar? Sahabet’te en iyi odullerle dolu. Bu f?rsat? kac?rmay?n ve 500% bonus elde edin. Sahabet, buyuk oduller sunan kumarhane olarak dikkat cekiyor.

    Sans?n?z? kac?rmay?n! Comert bonuslar talep edin ve Sahabet ile birlikte buyuk oduller kazan?n Sahabet .

  13. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, essiz f?rsatlar? alarak oyuna kat?labilir. Populer slot oyunlar? Sahabet’te kazananlar?n? bekliyor. En yuksek bonuslar? toplay?n ve depozitonuza +%500 kazan?n. Sahabet, buyuk oduller sunan kumarhane olarak dikkat cekiyor.

    Sans?n?z? kac?rmay?n! Comert bonuslar talep edin ve Sahabet ile birlikte buyuk oduller kazan?n Sahabet .

  14. Sazribi说道:

    Здравствуйте!
    Заказать документ института
    raichev.ru/obj/platforma-armata

  15. Thanks for a marvelous posting! I really enjoyed reading it, you might be a great author.
    I will make sure to bookmark your blog and definitely will
    come back sometime soon. I want to encourage you to ultimately continue
    your great job, have a nice evening!

  16. Harrynic说道:

    Digital casinos provide a thrilling array of titles, many of which these days incorporate cryptocurrency as a method of payment. Among the top casinos, BC Game, Panda Casino, Axe Casino, and Bitkingz are getting more attention, although Bit Starz distinguishes itself with many accolades. Cloud Bet Casino stands out for being an officially licensed crypto casino, guaranteeing user safety and fairness in gameplay, as well as Fairspin Casino along with Mbit feature a wide range of crypto-friendly games.

    For casino dice games, virtual currency casinos for example Bitcoin Dice offer a fun gaming experience, enabling players to gamble on Bitcoin and other cryptocurrencies including Ethereum, Litecoin, Dogecoin, BNB, and Tether USD.

    For gamblers, picking a reliable provider matters. Thunderkick Gaming, Play’n Go, Red Tiger Gaming, Quickspin Casino, Pragmatic Play Casino, Playtech Casino, Nolimit City, NetEnt Casino, ELK Studios, and Microgaming Casino are known as the top game developers recognized for their innovative slot machines, high-quality graphics, and user-friendly interfaces.

    Casino streaming has turned into a popular way for players to get involved in casino games. Well-known streamers such as Classy Beef, Roshtein, Labowsky, DeuceAce, and Xposed stream their gameplay, frequently showing huge wins and sharing advice on the best strategies in gambling.

    Additionally, casinos such as BC Casino, Bitkingz Casino, and Rocketpot Casino also feature Plinko bets, a fan-favorite game with straightforward mechanics with large possibilities for big wins.

    Knowing safe gambling, cashback options, and anonymous gaming in virtual casinos is important for users aiming to enhance their gaming experience. Selecting the right wallet, looking for no-registration-required casinos, and learning strategies for popular games like Aviator Casino Game enables users remain knowledgeable as they enjoy the excitement of the game.

  17. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, essiz f?rsatlar? alarak oyuna kat?labilir. En sevilen slotlar Sahabet’te en iyi odullerle dolu. Bu f?rsat? kac?rmay?n ve 500% bonus elde edin. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.

    Sans?n?z? kac?rmay?n! Comert bonuslar talep edin ve Sahabet ile birlikte buyuk oduller kazan?n Sahabet .

  18. Cazrldk说道:

    Как правильно приобрести диплом колледжа или ПТУ в России, важные моменты
    sterilno.com/inc/pgs/kak_kupit_diplom_novogo_obrazca_bustro_i_bezopasno

  19. Cazreyc说道:

    Как получить диплом техникума официально и без лишних проблем
    gimnas3.ru/d/articles/?gde_kupit_diplom_vuza_sovetu_i_rekomendacii

  20. заказать саженцы почтой недорого без предоплаты rodnoisad.ru .

  21. Cazrkoj说道:

    Официальная покупка диплома вуза с упрощенной программой обучения

    technosp.ru/images/pgs/kak_kupit_diplom_nuzghnogo_vuza_bustro_i_nadezghno

  22. купить саженцы с доставкой купить саженцы с доставкой .

  23. RandyRar说道:

    купить хендай солярис у официального дилера hyundai solaris механика купить

  24. RandyRar说道:

    хендай солярис 2024 цена новый у официального купить хендай солярис хэтчбек

  25. RandyRar说道:

    хендай солярис 2024 официальный дилер https://hyundai-solaris-krym.ru

  26. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak kazanmaya baslayabilir. En sevilen slotlar Sahabet’te en iyi odullerle dolu. En yuksek bonuslar? toplay?n ve depozitonuza +%500 kazan?n. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.

    Populer slotlar Sahabet casino\’da kazananlar?n? bekliyor Sahabet .

  27. Timothyliess说道:

    ссылка на кракен в тор – kraken darknet tor, ссылка на кракен в тор

  28. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak oyun keyfini c?karabilir. Populer slot oyunlar? Sahabet’te buyuk kazanclar sunuyor. Sans?n?z? simdi deneyin ve 500% bonus elde edin. Sahabet, yeni y?lda kazand?ran kumarhane olarak dikkat cekiyor.

    Populer slotlar Sahabet casino\’da kazananlar?n? bekliyor Sahabet .

  29. My brother recommended I would possibly like this blog.
    He was once totally right. This post truly
    made my day. You cann’t imagine simply how so much time I had spent for this information! Thank you!

  30. Lazrztd说道:

    Привет!
    Мы предлагаем дипломы любой профессии по выгодным тарифам.
    weekevents.ru/obrazovanie-vashey-mechtyi-legko-i-dostupno

  31. Eanrejc说道:

    Добрый день!
    Мы изготавливаем дипломы любой профессии по доступным тарифам.
    originalparts.ru/linkexchange/page68/?le_categoryID=0

  32. Eanrfwo说道:

    Привет!
    Мы готовы предложить дипломы любой профессии по выгодным ценам.
    shamrockrfc.com/player-interviews

  33. Eanrqup说道:

    Здравствуйте!
    Мы предлагаем дипломы любой профессии по доступным тарифам.
    passo.su/forums/index.php?autocom=gallery&req=si&img=2801%C3%82%C2%A0

  34. Cazrqvm说道:

    Привет, друзья!
    Купить диплом о высшем образовании
    купить диплом ветеринара

  35. Williamtok说道:

    Привет, друзья!
    Мы можем предложить дипломы.
    club4x4.ru/forum/viewtopic.php?f=28&t=95191

  36. Williamtok说道:

    Добрый день!
    Мы изготавливаем дипломы.
    camxiaomifb.blogspot.com/2024/01/blog-post_19

  37. Williamtok说道:

    Добрый день!
    Мы изготавливаем дипломы.
    moemesto.ru/lextrust/link/15227141

  38. LarryErepe说道:

    разработка сайта в москве недорого https://seo-5.ru

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注