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

/ 36,547评论 / 160222阅读 / 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. Filippesliz说道:

    CVzen https://cvpro.com.tr/ dünya çapında milyonlarca iş arayan için nihai CV yazma hizmeti ve kariyer koçudur. Uzman ekibimiz başarınıza kendini adamıştır ve profesyonel CV’nizi ve ön yazınızı sektörel özelliklerle yazmaktan LinkedIn profilinizi optimize etmeye ve profesyonel kariyer koçluğu sağlamaya kadar kariyer yolculuğunuz boyunca sizi destekleyecektir. Potansiyelinizi ortaya koyan bir özgeçmiş ile yeni fırsatların kilidini açın.

  2. IgnacioGinia说道:

    Pharmacie Internationale en ligne: pharmacie en ligne – Pharmacie en ligne livraison Europe

  3. akovaBox说道:

    Автоломбард https://www.dcc.kz/ с правом вождения: Залог вашего автомобиля с возможностью его использования. Мы выдаем до 50% от суммы залога. Автоломбард без права вождения: Ваш автомобиль остается на охраняемой стоянке, где он будет находиться до момента окончания выплаты по кредиту. Мы выдаем до 70% от суммы залога.

  4. AllenTal说道:

    pharmacie en ligne france fiable: pharmacie en ligne pas cher – pharmacie en ligne avec ordonnance

  5. Keithhak说道:

    pharmacies en ligne certifiГ©es kamagra 100mg prix pharmacie en ligne avec ordonnance

  6. AllenTal说道:

    Pharmacie sans ordonnance: pharmacie en ligne pas cher – pharmacie en ligne sans ordonnance

  7. IgnacioGinia说道:

    Viagra sans ordonnance livraison 24h: Viagra generique en pharmacie – Viagra vente libre allemagne

  8. Jseraldskync说道:

    В наше время, когда диплом является началом успешной карьеры в любой отрасли, многие пытаются найти максимально простой путь получения качественного образования. Наличие документа об образовании трудно переоценить. Ведь диплом открывает дверь перед всеми, кто желает вступить в профессиональное сообщество или учиться в высшем учебном заведении.
    В данном контексте наша компания предлагает оперативно получить этот необходимый документ. Вы можете приобрести диплом, и это будет удачным решением для человека, который не смог завершить образование, утратил документ или хочет исправить свои оценки. Все дипломы производятся аккуратно, с максимальным вниманием ко всем нюансам. На выходе вы получите документ, максимально соответствующий оригиналу.
    Преимущество данного подхода состоит не только в том, что вы оперативно получите диплом. Весь процесс организован комфортно, с профессиональной поддержкой. От выбора нужного образца диплома до консультации по заполнению персональной информации и доставки по стране — все находится под полным контролем квалифицированных специалистов.
    Для тех, кто хочет найти быстрый и простой способ получения необходимого документа, наша услуга предлагает выгодное решение. Приобрести диплом – значит избежать долгого обучения и не теряя времени переходить к достижению личных целей, будь то поступление в университет или старт карьеры.
    http://www.hami-bar.com/a-qualitative-approach-to-understanding-real-world-electronic-cigarette-use-implications-for-measurement-and-regulation/comment-page-18061/В 
    m.jingdexian.com/home.php?mod=space&uid=2545488В 
    sewmir.ru/index.php?links_exchange=yes&page=71&show_all=yesВ 
    your-mobila.ru/fly-fs518-cirrus-13-hard-reset.htmlВ 
    dentaldaily.ru/uslugi/brekety/ispravlenie-prikusa/В 

  9. Edwardcit说道:

    pharmacie en ligne pas cher: Levitra acheter – trouver un mГ©dicament en pharmacie

  10. AllenTal说道:

    Viagra homme prix en pharmacie sans ordonnance: Viagra generique en pharmacie – Viagra sans ordonnance 24h

  11. Very well presented. Every quote was awesome and thanks for sharing the content. Keep sharing and keep motivating others.

  12. Edwardcit说道:

    acheter mГ©dicament en ligne sans ordonnance: levitra en ligne – п»їpharmacie en ligne france

  13. PankrRow说道:

    На сайте https://t.me/mvavada почитайте интересную, увлекательную и свежую информацию относительно проекта «VAVADA», который стал одним из самых популярных в Интернете. У вас появляется удивительная возможность ознакомиться с материалами, которые будут нужны для того, чтобы воспользоваться всеми преимуществами онлайн-площадки. На этом канале, в первую очередь, публикуются ценные и важные новости, промокоды, освещаются важные события. Публикуются только честные, правдивые материалы. Заходить сюда можно ежедневно и с любого устройства, в том числе, смартфона.

  14. Keithhak说道:

    pharmacie en ligne pas cher Pharmacie Internationale en ligne pharmacie en ligne pas cher

  15. TimsothyPal说道:

    В нашем обществе, где диплом – это начало удачной карьеры в любой сфере, многие ищут максимально простой путь получения образования. Важность наличия документа об образовании переоценить невозможно. Ведь именно диплом открывает двери перед любым человеком, желающим вступить в сообщество профессионалов или учиться в ВУЗе.
    В данном контексте наша компания предлагает оперативно получить этот необходимый документ. Вы сможете заказать диплом, что является выгодным решением для всех, кто не смог завершить обучение, утратил документ или хочет исправить свои оценки. диплом изготавливается с особой аккуратностью, вниманием к мельчайшим деталям. В итоге вы сможете получить полностью оригинальный документ.
    Плюсы такого подхода заключаются не только в том, что вы сможете быстро получить диплом. Процесс организован комфортно, с профессиональной поддержкой. Начиная от выбора необходимого образца до консультации по заполнению персональной информации и доставки по России — все находится под абсолютным контролем квалифицированных специалистов.
    Для тех, кто ищет максимально быстрый способ получить необходимый документ, наша компания предлагает выгодное решение. Приобрести диплом – значит избежать долгого обучения и не теряя времени переходить к достижению своих целей, будь то поступление в ВУЗ или начало карьеры.
    zdravnso.ru/articls/node/174В 
    mitino-opt.ru/hyundai-blogВ 
    tmwip-chelm.org.pl/profile.php?lookup=16274В 
    forums.artoolkitx.org/viewtopic.php?t=516720В 
    portugues.ru/forum/album.php?albumid=76&attachmentid=3574В 

  16. AllenTal说道:

    pharmacie en ligne: kamagra 100mg prix – pharmacie en ligne livraison europe

  17. RobertDer说道:

    https://cenligne.com/# pharmacie en ligne france livraison belgique

  18. SOLaneuncog说道:

    В нашем обществе, где диплом – это начало успешной карьеры в любой сфере, многие стараются найти максимально быстрый и простой путь получения образования. Необходимость наличия официального документа об образовании переоценить невозможно. Ведь диплом открывает дверь перед каждым человеком, который стремится вступить в профессиональное сообщество или учиться в ВУЗе.
    Мы предлагаем быстро получить любой необходимый документ. Вы сможете заказать диплом нового или старого образца, и это становится выгодным решением для всех, кто не смог завершить образование, утратил документ или хочет исправить свои оценки. дипломы производятся аккуратно, с особым вниманием ко всем нюансам. На выходе вы получите продукт, максимально соответствующий оригиналу.
    Преимущество подобного подхода заключается не только в том, что можно оперативно получить диплом. Весь процесс организовывается удобно и легко, с профессиональной поддержкой. Начиная от выбора необходимого образца до грамотного заполнения личной информации и доставки по стране — все находится под полным контролем наших специалистов.
    Для тех, кто хочет найти быстрый способ получения требуемого документа, наша услуга предлагает отличное решение. Купить диплом – значит избежать длительного обучения и сразу перейти к достижению своих целей, будь то поступление в ВУЗ или старт трудовой карьеры.
    pravoslavie.ru/135334.htmlВ 
    chem.msu.su/rus/univ/В 
    befile.ru/article/article_2002.htmlВ 
    notstar.ru/tragediya-larisy-burkovoj/В 
    gti-club.ru/forum/member.php?u=23001&tab=visitor_messaging&page=15В 

  19. tenevoy_sgsr说道:

    Теневой плинтус: стильное решение для обновления интерьера,
    Шаг за шагом инструкция по установке теневого плинтуса,
    Теневой плинтус как элемент декора: идеи и варианты применения,
    Модные тренды в выборе теневых плинтусов для современного дома,
    Гармония оттенков: выбор цвета теневого плинтуса для любого интерьера,
    Безопасность и стиль: почему теневой плинтус – идеальное решение для дома,
    Преимущества использования теневого плинтуса с интегрированной подсветкой,
    Теневой плинтус: элегантность и стиль в дизайне помещения,
    Интерьер безупречный до мелочей: роль теневого плинтуса в декоре
    заказать плинтус заказать плинтус .

  20. PavelMum说道:

    Магазин, где представлен широкий выбор раковина фаянсовая с пьедесталом для вашей ванной комнаты, с доставкой по всей стране.

  21. UliaMum说道:

    Интернет-магазин, где можно найти огромный ассортимент раковина для кухни металлическая для вашей ванной комнаты.

  22. LliodInvax说道:

    Хотите по недорогой цене купить печи Ферингер? Feringer.shop вам в этом поможет! Мы регулярно расширяем свой ассортимент, устраиваем акции и улучшаем уровень сервиса. Вы можете рассчитывать на выгодные условия покупки печного оборудования. Ищете печи для бани ферингер? Feringer.shop – здесь есть возможность уже сегодня ознакомиться с условиями доставки и отзывами реальных покупателей. Гарантируем качество товара и наилучшую цену. Учитываем потребности и пожелания своих заказчиков. Всегда рады вас проконсультировать и помочь осуществить установку изделия, обращайтесь.

  23. AllenTal说道:

    Pharmacie Internationale en ligne: Cialis sans ordonnance 24h – pharmacies en ligne certifiГ©es

  24. XRumer23jatup说道:

    האפליקציה מהווה תוכנה נפוצה בארץ לרכישת צמח הקנאביס באופן אינטרנטי. היא נותנת ממשק פשוט לשימוש ומאובטח לקנייה ולקבלת משלוחים של פריטי קנאביס מרובים. בכתבה זו נבחן עם הרעיון מאחורי האפליקציה, כיצד היא עובדת ומהם היתרונות מ השימוש בזו.

    מהי טלגראס?

    האפליקציה הינה אמצעי לקנייה של צמח הקנאביס דרך היישומון טלגרם. זו נשענת מעל ערוצים וקבוצות טלגראם מיוחדות הנקראות ״טלגראס כיוונים, שם אפשר להזמין מגוון מוצרי קנאביס ולקבלת אלו ישירותית למשלוח. ערוצי התקשורת אלו מאורגנים על פי איזורים גיאוגרפיים, כדי לשפר את קבלת המשלוחים.

    איך זה עובד?

    התהליך קל למדי. קודם כל, צריך להצטרף לערוץ טלגראס הנוגע לאזור המחיה. שם אפשר לצפות בתפריטים של המוצרים השונים ולהזמין עם הפריטים הרצויים. לאחר השלמת ההרכבה וסגירת התשלום, השליח יגיע לכתובת שצוינה ועמו הארגז שהוזמן.

    רוב ערוצי הטלגראס מספקים מגוון נרחב מ מוצרים – סוגי מריחואנה, עוגיות, שתייה ועוד. בנוסף, אפשר למצוא ביקורות של לקוחות שעברו לגבי רמת המוצרים והשירות.

    יתרונות הנעשה בפלטפורמה

    מעלה עיקרי של האפליקציה הינו הנוחיות והדיסקרטיות. ההרכבה וההכנות מתבצעות ממרחק מכל מקום, בלי נחיצות בהתכנסות פנים אל פנים. בנוסף, הפלטפורמה מוגנת היטב ומבטיחה סודיות גבוה.

    נוסף על כך, עלויות המוצרים באפליקציה נוטים להיות תחרותיים, והמשלוחים מגיעים במהירות ובמסירות גבוהה. יש אף מוקד תמיכה פתוח לכל שאלה או בעיה.

    לסיכום

    הפלטפורמה מהווה דרך חדשנית ויעילה לרכוש פריטי מריחואנה במדינה. היא משלבת את הנוחיות הטכנולוגית מ האפליקציה הפופולרי, ועם המהירות והדיסקרטיות של דרך השילוח הישירה. ככל שהביקוש לצמח הקנאביס גובר, אפליקציות כמו זו צפויות להמשיך ולהתפתח.

  25. k8 カジノ说道:

    L Carpenter Gen-san Super Dream Gen
    この記事は実に役に立ちます。大変感謝しています。

  26. Edwardcit说道:

    Achat mГ©dicament en ligne fiable: Achat mГ©dicament en ligne fiable – acheter mГ©dicament en ligne sans ordonnance

  27. IgnacioelOrb说道:

    pharmacie en ligne avec ordonnance: kamagra en ligne – vente de mГ©dicament en ligne

  28. Edwardcit说道:

    trouver un mГ©dicament en pharmacie: vente de mГ©dicament en ligne – pharmacie en ligne france pas cher

  29. Styazhka_dlPt说道:

    полусухая стяжка пола стоимость работ http://mekhanizirovannaya-shtukaturka15.ru/ .

发表回复

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