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

/ 12,031评论 / 30461阅读 / 1点赞

<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. GordonNoing说道:

    мТут вы сможете найти все что надо для долгого удовольствия.
    Abuse

  2. TracyFoome说道:

    comprare farmaci online con ricetta: kamagra gel – farmacia online migliore

  3. MillieTok说道:

    казино вавада официальный
    https://t.me/s/kazino_vavada_oficialnyj

  4. Terryflodo说道:

    comprare farmaci online con ricetta kamagra gold farmaci senza ricetta elenco

  5. GordonNoing说道:

    мHere you can find everything you need for long-lasting pleasure.
    milf

  6. NormaboW说道:

    vavada обзор
    https://t.me/s/vavada_obzor

  7. GordonNoing说道:

    мПродаем виагру самый чистый продукт, твой прибор будет налит как бубон, жаркая любовь гарантирована
    Big

  8. Terryflodo说道:

    farmacie online sicure farmacia online piu conveniente acquisto farmaci con ricetta

  9. BobbyBub说道:

    Stumbled upon interesting material – I can’t help but recommend you to read https://sphynx.forogratis.es/premier-escort-in-dubai-t3350.html

  10. Wandazef说道:

    joycasino бонус за регистрацию
    joycasino бонус за регистрацию

  11. VanceUnift说道:

    joycasino: вся правда о ставках на киберспорт Казино joycasino принимает ставки на спортивные мероприятия с 2007 года, включая киберспорт. За все время существования компания заняла лидирующее место в отрасли e- Games . Казино joycasino освещает ставки на киберспорт на высоком уровне, как и аналогичные, более традиционные виды спорта. джойказино казино | официальный сайт казино джойказино (Joycasino), зеркало, регистрация – https://atelica-tavrida.ru/
    Ставки на 21 очко joycasino: выбор беспроигрышной стратегии Live Казино joycasino предлагает не только играть, но и просто наблюдать за процессом виртуальной игры между компьютером и игроками, делая ставку. В таком случае доступны следующие варианты для ставок: Победа игрока/дилера или ничья. Общий тотал – больше/меньше. Индивидуальный тотал. Дилер или игрок наберет 21 очко. Участник получит карту значением валет/дама/король/туз/6-10 – да/нет. Игра завершится на раздаче – да/нет. Выпадет конкретная карта. Профессиональные бетторы давно определили много выигрышных стратегий в игре 21 очко или Блэкджек, включая Live. Пользователь следит за раздачей карт в режиме реального времени. Если в первые 4-5 раздач никому из игроков не удастся набрать нужное количество баллов, то скорее всего это случится в следующем. Игрок должен контролировать процесс и сделать ставку в нужный момент. Коэффициент на определенную ставку – 4.64, что значит, что победа может увеличить банковский счет игрока в пять раз. Стратегия ставок, где «игрок получит карту/масть» в режиме «лайв». Задача беттора отследить ситуацию на выпадения карт, зафиксировать в памяти ту, которая на протяжении нескольких раскладов еще не выпадала, и сделать ставку. Стратегия на тотал карт (больше / меньше). Основывается на методе Мартингейла, другими словами — догон. Букмекер предлагает поставить на общий или на индивидуальный тотал одного из игроков. Пользователь должен наблюдать за количеством очков дилера. Live стратегия. Такой способ требует особой внимательности игрока, который посещая онлайн трансляцию должен присматриваться к раздачам. Профессионалы даже рекомендуют карты записывать. Только после этого, можно легко вычислить масть, которая давно не попадалась на руки игрокам.
    ?? Игровые автоматы в онлайн казино Джойказино бонус и депозит зависят от 25-кратного требования по отыгрышу, вы должны внести депозит 20 евро или более, у вас есть 7 дней для завершения бонусных условий. Всегда имейте в виду, что на официальном сайте бонусы, а также игры и банковские методы, доступные в любом онлайн-казино, будут отличаться в зависимости от местоположения пользователей. Поэтому помните, что часть информации, которую вы найдете в этом обзоре, может отличаться для некоторых пользователей. Существует специальная банковская страница игровых автоматов, где вы можете проверить лимиты и время транзакций. Рекомендуем: Более того, плата за обработку платежей не взимается. Время снятия средств варьируется между вариантами оплаты с обычными банковскими картами, занимающими больше всего времени, за которыми следуют электронные кошельки и крипто-платежи, предлагающие самый быстрый способ обналичить ваши заслуженные выигрыши.

  12. GordonNoing说道:

    мПродаем виагру самый чистый продукт, твой прибор будет налит как бубон, жаркая любовь гарантирована
    milf

  13. oiseevkar说道:

    На сайте http://kinomanfhd.online вы сможете выбрать и просмотреть интересный, увлекательный фильм различного жанра: триллер, боевик, мелодраму, криминал, семейный, фэнтези, историю, документальный. Здесь также имеются сериалы, мультфильмы, проекты прошлого года и уходящего. Обязательно изучите топ наиболее популярных фильмов, которые нравятся большинству пользователей. Для того чтобы подыскать оптимальный вариант, необходимо воспользоваться специальным поиском. Все фильмы представлены в отличном качестве и с хорошим звуком.

  14. GordonNoing说道:

    мYou can find the best services for entertainment here.
    Big

  15. GregoryNit说道:

    Торговать на маркетплейсах без документов соответствия можно только продукцией, не входящей в перечни ТР ЕЭАС, Постановления № 982, Решения КТС № 299 https://www.sostav.ru/blogs/30357/42484 отдельный нормативный акт по товарам, не подлежащим обязательной оценке, не разработан. Подтвердить факт их отсутствия в законах можно с помощью отказного письма.

  16. RosalynIrorn说道:

    казино вавада отзывы
    казино вавада отзывы

  17. MichaelRhync说道:

    термопанели кирпич https://klinkerprom13.ru/

  18. GordonNoing说道:

    мHere you can find everything you need for long-lasting pleasure.
    Titty

  19. Sonnynap说道:

    farmacia online senza ricetta: kamagra oral jelly consegna 24 ore – farmacia online piГ№ conveniente

  20. SidneyFub说道:

    http://kamagrait.club/# farmacia online

  21. SidneyFub说道:

    https://tadalafilit.store/# farmacie online sicure

  22. GordonNoing说道:

    мYou can find the best services for entertainment here.
    Bitch

  23. ShirleyPub说道:

    joycasino онлайн
    https://t.me/s/joycasino_onlajn

  24. Mistyhet说道:

    joycasino com играть
    joycasino com играть

发表回复

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