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

/ 64,050评论 / 306612阅读 / 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. MichaelFah说道:

    casino online uy tin casino tr?c tuy?n uy tin casino tr?c tuy?n vi?t nam

  2. Chrisror说道:

    casino tr?c tuy?n casino tr?c tuy?n vi?t nam casino online uy tin

  3. ladneDab说道:

    Сайт faktura-decor.ru предоставляет исключительно качественные товары. Мы хорошо понимаем, что именно вам необходимо. Наши основные ценности: честность, профессионализм и открытость. Ищете декоративная штукатурка под микроцемент? Faktura-decor.ru – сайт, где можно найти отзывы радостных клиентов. Гарантируем широкий выбор уникальных декоративных решений под разный дизайн проект, квалифицированные консультации специалистов и доступную цену. Интересующий товар можно заказать online непосредственно на сайте или же оформить по контактному номеру телефона.

  4. Walteronerb说道:

    https://casinvietnam.com/# casino online uy tin

  5. sandyterrace.com说道:

    thewiin.com
    “이리와, 오늘 심문 끝났어, 내려, 당장 내려.”

  6. Chrisror说道:

    casino tr?c tuy?n vi?t nam casino tr?c tuy?n vi?t nam web c? b?c online uy tin

  7. ogoodwhown说道:

    Добро пожаловать на сайт https://nauka-slovo.ru/ где вы найдете самую обширную базу слов в интернете, разделенных по корням! Мы предоставляем огромный словарь, где каждый может бесплатно воспользоваться возможностью изучения корней слов. Узнайте состав и происхождение любого слова, расширьте свой лексический запас и глубже погрузитесь в структуру русского языка. Присоединяйтесь к нам сегодня и начните путешествие в мир корней слов!

  8. MichaelFah说道:

    choi casino tr?c tuy?n tren di?n tho?i casino online uy tin choi casino tr?c tuy?n tren di?n tho?i

  9. Walteronerb说道:

    http://casinvietnam.shop/# danh bai tr?c tuy?n

  10. casino ipkt说道:

    Descubre la magia de los casinos en linea en Peru?
    mejor casino online peru mejor casino online peru .

  11. I like just how you approach this subject matter. Your viewpoint is unique and refreshing. https://tivixy.com/best-onlyfans-marketing-and-promotion-agencies-in-miami/

  12. MatthewDoolo说道:

    erectile dysfunction pills online: erectile dysfunction pills for sale – cheap ed treatment

  13. taktichn__klOa说道:

    Як підтримувати чистоту та порядок у тактичних кросівках
    купити тактичні військові кросівки купити тактичні військові кросівки .

  14. Thank you for great content. Hello Administ. 国产线播放免费人成视频播放

  15. Armandosed说道:

    https://medicationnoprescription.pro/# buying prescription drugs online from canada

  16. Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across.儿童色情

  17. lose money说道:

    I urge you to avoid this site. My personal experience with it has been nothing but dismay along with concerns regarding deceptive behavior. Proceed with extreme caution, or even better, look for a more reputable service to meet your needs.

  18. Good info. Lucky me I reach on your website by accident, I bookmarked it. 現場兒童色情片

  19. Armandosed说道:

    http://edpill.top/# cheap erectile dysfunction pills

  20. sSdfffobacedy说道:

    Здравствуйте!

    Было ли у вас когда-нибудь так, что приходилось писать дипломную работу в очень сжатые сроки? Это действительно требует огромной ответственности и может быть очень тяжело, но важно не опускать руки и продолжать активно заниматься учебными процессами, как я.
    Для тех, кто умеет быстро находить и использовать информацию в интернете, это действительно облегчает процесс согласования и написания дипломной работы. Больше не нужно тратить время на посещение библиотек или устраивать встречи с научным руководителем. Здесь, на этом ресурсе, предоставлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями на сайте , это проверено!
    http://wiki.intradition.ru/index.php/ упить_свидетельства_о_дополнительном_обучении
    купить диплом о среднем специальном
    купить диплом о среднем образовании
    купить аттестат школы
    купить аттестат
    купить диплом ссср

    Желаю каждому пятерошных) оценок!

  21. AustinWhoto说道:

    canadian pharmacy without prescription: canada online prescription – no prescription

  22. PhilipBup说道:

    canadian pharmacy discount coupon canada online pharmacy no prescription cheap pharmacy no prescription

  23. PhilipBup说道:

    cheapest pharmacy to get prescriptions filled online pharmacy without prescription international pharmacy no prescription

  24. MatthewDoolo说道:

    canada drugs coupon code: uk pharmacy no prescription – no prescription needed canadian pharmacy

  25. 1win921Cic说道:

    Melhor casa de apostas n? 1 do mundo 1win

  26. 1winFoin822wette说道:

    A casa de apostas mais fiavel do mundo – 1win

  27. MatthewDoolo说道:

    ed treatment online: ed prescription online – ed treatments online

  28. casino yckt说道:

    Descubre la magia de los casinos en linea en Peru?
    casino en linea peru casino en linea peru .

  29. PhilipBup说道:

    canadian pharmacy coupon code canadian pharmacy discount code no prescription pharmacy paypal

  30. HarveyBeemi说道:

    http://onlinepharmacyworld.shop/# offshore pharmacy no prescription

  31. PhilipBup说道:

    cheap erection pills buying erectile dysfunction pills online online ed drugs

  32. MatthewDoolo说道:

    discount prescription drugs canada: online drugs no prescription – online meds without prescription

  33. PhilipBup说道:

    canadian pharmacy discount code no prescription pharmacy paypal canadian pharmacy world coupon

  34. Armandosed说道:

    https://medicationnoprescription.pro/# best online pharmacy no prescription

  35. EdwardHix说道:

    Есть ли бонусы в биткоин казино за регистрацию? Как и любые другие интернет казино, заведения, принимающие криптовалюту, поощряют новых клиентов приветственными бонусами. Это в большинстве случаев проценты на первое пополнение игрового баланса (от 100 до 200%) и несколько следующих депозитов. А также бесплатные вращения на игровых автоматах (нередко бездепозитные). Просто создайте свой личный аккаунт в онлайн казино на биткоины и получите приятный презент от оператора. Ultra hot x – x официальный сайт рабочее зеркало
    В Подмосковье закрыли работавшее под видом Казино казино Полиция закрыла в Подмосковье подпольное казино, работавшее под видом Казино. Об этом 24 августа сообщили «Известиям» в МВД РФ. 18 августа 2022, 16:41
    Можно ли играть в икс с выводом на карту Сбербанка без верификации аккаунта? В вышеперечисленных интернет казино икс с выводом денег в правилах указано, что во время регистрации игрок подтверждает своё совершеннолетие и правильность введённой личной информации. За казино остаётся право в любой момент запросить документы для проверки введённых данных. Однако выводить на карты Сбербанка до этого момента можно спокойно без верификации. В обязательном порядке подтверждение личности потребуется только при заказе на выплату значительной суммы. В случае, к примеру, с Икс Deluxe это будет $1000. Тогда придётся предоставить цифровую копию документа, удостоверяющего личность. Сам принцип верификации в каждом игровом клубе организован по-разному. К примеру, в том же икс Делюкс процедуру можно пройти добровольно. Для этого достаточно в любой момент, не дожидаясь запросов от игрового клуба, в личном кабинете загрузить сканы или фото документов. А в казино икс 24 с выводом так сделать нельзя. Запрос на верификацию при необходимости ресурс пришлёт на электронную почту. Там нужно будет в обратном письме ответить на вопросы и загрузить документы. Ещё раз сделаем акцент на том, что использованная карта Сбера, как и любого другого банка, должна быть верифицирована. Для этого в казино необходимо направить фото карты с 2 сторон. За сохранность денег можно не переживать, поскольку на фото необходимо закрыть часть цифр по средине и CVV код.

  36. LarryGok说道:

    PBN sites
    We will establish a web of PBN sites!

    Advantages of our self-owned blog network:

    WE DO everything SO THAT Google does not understand THAT this is A self-owned blog network!!!

    1- We obtain domain names from separate registrars

    2- The main site is hosted on a virtual private server (Virtual Private Server is high-speed hosting)

    3- Other sites are on various hostings

    4- We assign a unique Google profile to each site with verification in Google Search Console.

    5- We make websites on WordPress, we do not utilise plugins with aided by which Trojans penetrate and through which pages on your websites are established.

    6- We do not duplicate templates and use only exclusive text and pictures

    We never work with website design; the client, if desired, can then edit the websites to suit his wishes

  37. MatthewDoolo说道:

    non prescription online pharmacy: canadian drugs no prescription – buy medications without a prescription

  38. sSdfffobacedy说道:

    Приветики!

    Бывало ли у вас такое, что приходилось писать дипломную работу в очень ограниченные сроки? Это действительно требует большой ответственности и тяжелого труда, но важно не сдаваться и продолжать активно заниматься учебными процессами, так же, как и я.
    Для тех, кто умеет эффективно использовать интернет для поиска и анализа информации, это действительно облегчает процесс согласования и написания дипломной работы. Не нужно тратить время на посещение библиотек или организацию встреч с дипломным руководителем. Здесь представлены надежные данные для заказа и написания дипломных и курсовых работ с гарантией качества и доставкой по всей России. Можете ознакомиться с предложениями по ссылке , это проверенный способ!
    https://smd.mybb.ru/viewtopic.php?id=3070#p20825
    купить диплом Вуза
    где купить диплом
    купить диплом магистра
    купить диплом университета
    купить аттестат

    Желаю любому отличных отметок!

  39. casibom说道:

    I really love to read such an excellent article. Helpful article. Hello Administ . 国产线播放免费人成视频播放

  40. ShaneIcows说道:

    Lessons waiting for you at our Virtuoso School: saxophone lessons near me Unlock your creative potential at Virtuoso School of Music and Art.

  41. MatthewDoolo说道:

    canada pharmacy no prescription: best website to buy prescription drugs – canada pharmacy online no prescription

  42. HarveyBeemi说道:

    http://medicationnoprescription.pro/# online medicine without prescription

  43. demidcum说道:

    На сайте https://1-line.su/ воспользуйтесь помощью квалифицированных, компетентных сотрудников популярного предприятия «Первая линия». Они окажут необходимую поддержку в вопросах оптимизации, автоматизации различных бизнес-процессов. Компания сделает все возможное для того, чтобы вы работали наиболее эффективно и продуктивно. Воспользуйтесь полным набором работающих инструментов, которые точно вам пригодятся для построения бизнеса. Для того чтобы начать сотрудничество, просто напишите на электронную почту.

  44. I really love to read such an excellent article. Helpful article. Hello Administ . 国产线播放免费人成视频播放

  45. avmaspable说道:

    На сайте https://vk.com/promocodi.yandex.market вы найдете промокоды Яндекс.Маркета. Они предоставят вам отличную возможность сэкономить приличную сумму денег. Новые промокоды публикуются в группе ежедневно, чтобы ими воспользовались все желающие. Также есть выгодные предложения и от таких популярных и надежных магазинов, как «Самокат», «Спортмастер». Используйте промокод каждый раз при оформлении. Прямо сейчас есть возможность использовать промокод, чтобы получить выгоду в 200 рублей.

回复 PhilipBup 取消回复

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