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

/ 76,488评论 / 344889阅读 / 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. LarryErepe说道:

    поисковая seo оптимизация сайта в москве https://seo-5.ru

  2. LarryErepe说道:

    оптимизация сайтов недорого https://seo-5.ru

  3. hello!,I really like your writing very much!

    share we keep in touch extra approximately your article on AOL?
    I need a specialist in this space to resolve my problem.
    Maybe that’s you! Looking forward to peer you.

  4. I am really enjoying the theme/design of your site.
    Do you ever run into any web browser compatibility issues?
    A small number of my blog readers have complained about my website
    not operating correctly in Explorer but looks great
    in Opera. Do you have any recommendations to help fix this issue?

  5. LarryErepe说道:

    оптимизация сайта москва https://seo-5.ru

  6. LarryErepe说道:

    раскрутка сайта https://seo-5.ru

  7. blatta.ru说道:

    Купить рабочую спецодежду blatta.ru

    Если Вы хотели найти спецодежда полукомбинезон мужской летний купить в сети интернет, то заходите на наш онлайн сайт. Посмотрите каталог нашей очень прочной, оригинальной рабочей одежды. Завершилось то время, когда люди выбирали невысокие цены, игнорируя качество. Сейчас, в век развитых технологий, новинки приходят и в сферу специальной одежды. Оцените сами, купив наши лучшие модели.

  8. LarryErepe说道:

    комплексное продвижение сайтов под ключ https://seo-5.ru

  9. blatta.ru说道:

    Мужская спецодежда blatta.ru

    По вопросу полукомбинезоны рабочие спецодежда мужские звоните нам. Мы на связи 24 часа, без выходных. Контактный телефон +7(912)447-84-22 или пишите нам в телеграм. Находимся по адресу: г. Ижевск, Воткинское шоссе, 16 В. Время работы с понедельна по пятницу с 9:00 до 18:00. Доставляем одежду по всей России. Успейте заказать по отличным расценкам.

  10. Lazrduj说道:

    Привет!
    Мы можем предложить дипломы любой профессии по доступным ценам.
    otsema.ru/uroki/urok1_igra_na_gitare.php

  11. Lazrslr说道:

    Привет, друзья!
    Мы изготавливаем дипломы любой профессии по выгодным ценам.
    gamla.vykort.com/member.php?action=showprofile&user_id=26956

  12. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в челябинске

  13. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в челябинске

  14. Если вы искали где отремонтировать сломаную технику, обратите внимание – тех профи

  15. Sahabet说道:

    Sahabet Casino’da yeni oyuncular, essiz f?rsatlar? alarak oyuna kat?labilir. Kazand?ran slotlar Sahabet’te buyuk kazanclar sunuyor. Bu f?rsat? kac?rmay?n ve depozitonuza +%500 kazan?n. Sahabet, yeni y?lda kazand?ran kumarhane olarak dikkat cekiyor.

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

  16. VQN Что такое расстановки по Хеллингеру и в чем их суть. https://rasstanovkiural.ru

  17. выигрывайте и наслаждайтесь!
    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 рабочее .

  18. LarryErepe说道:

    заказать продвижение сайта https://seo-5.ru

  19. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

  20. Joeacupt说道:

    Букмекерская контора «Мелбет» – это уникальная возможность для всех желающих получить дополнительный доход. Здесь можно делать ставки на самые разные спортивные события по всему миру. Высокие коэффициенты, круглосуточная техническая поддержка, удобное мобильное приложение и многие другие преимущества проекта делают его весьма популярным среди любителей азартных игр. Доступ на виртуальную площадку открыт лишь для зарегистрированных пользователей. промокод при регистрации Melbet помогут сэкономить как начинающим, так и опытным игрокам. В такой надежной и стабильной букмекерской конторе вы всегда можете быть уверены.

  21. Garrettbiz说道:

    Found a captivating read that I’d like to recommend to you https://www.infoprods.ru/user/hronougltc

  22. Lazrxfz说道:

    Здравствуйте!
    Мы изготавливаем дипломы любой профессии по приятным тарифам.
    activity.ru/forum/posting.php?mode=reply&f=7&t=102302

  23. Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в барнауле

  24. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в челябинске

  25. CVL Расстановки в психологии — суть метода. https://rasstanovkiural.ru

  26. Если вы искали где отремонтировать сломаную технику, обратите внимание – профи услуги

  27. LarryErepe说道:

    поисковое продвижение сайта в москве https://seo-5.ru

  28. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

  29. Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в барнауле

  30. LarryErepe说道:

    создание сайта под ключ цена https://seo-5.ru

  31. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт цифровой техники барнаул

  32. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в барнауле

  33. LarryErepe说道:

    аудит сайта в поиске заказать https://seo-5.ru

  34. LarryErepe说道:

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

  35. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в челябинске

发表回复

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