Предложить вариант отключения аудиозаписей

Question

Я радиоведущий и имею mp3-поток моих трансляций, настроенных для автозапуска на моем сайте (Я знаю, я знаю, просто юмор меня). Используя аудиотекст HTML5, я хочу, чтобы звук автоматически запускался при первом посещении моего сайта.

Тем не менее, я хочу, чтобы у них была возможность установить флажок, в результате звук автоматически не запускается для них снова, если они не сняли флажок.

Этот флажок должен отображаться как раз под звуковым проигрывателем и изменить тег автовоспроизведения с «true» на «false».

Я видел плагины, которые остановят автовоспроизведение, но не могут найти какой-либо код в Интернете, чтобы предлагать этот вариант самостоятельно, который просто показывает, сколько людей используют автоматическое воспроизведение без разбора. Я бы никогда не мечтал использовать его, не предлагая вариант отключения.

После нескольких быстрых исследований я собрал следующий код, но поскольку я кодер n00b, я не могу заставить его работать. Где я ошибаюсь и что является самым элегантным решением?

function check(that){ 
 
\t if(that.value === "disable-autoplay"){ 
 
     if((this).is(':checked')){ 
 
      autoplay="no"('checked'); 
 
\t \t } 
 
\t }else { 
 
\t \t autoplay="autoplay"('unchecked'); 
 
    \t } 
 
}

<audio controls autoplay="true"><source src="stream.mp3" type="audio/mp3"></audio> 
 
<input type="checkbox" name="disable-autoplay" value="disable-autoplay" onchange="check(this)" />

Answer 1

С MDN

автовоспроизведение: Логическое атрибута; если это указано (даже если значение «false»!), звук автоматически начнет воспроизведение, как только он сможет это сделать, не дожидаясь завершения всего аудиофайла

Первое, что не делается назначить любой автозапуск вообще в вашем HTML

<audio id="myAudio" controls> 
    <source src="song.ogg" type="audio/ogg"> 
    <source src="song.mp3" type="audio/mpeg"> 
</audio> 

Создайте флажок с каким-то селектором, как идентификатор также не назначить обработчик события в атрибуте

<input type="checkbox" name="disableAutoplay" id="disableAutoplay" /> 

Теперь я полагаю, вы хотите предпочтение упорствовать entir e, так что даже если пользователь обновляется/перемещается по вашему сайту, его предпочтение должно оставаться, поскольку для этого используются файлы cookie или хранилище браузера. Я думаю, что с помощью локального хранилища будет лучше, благодаря своей простоте

localStorage.setItem('disableAP','yes');   //saving 
disableAutoplay = localStorage.getItem('disableAP');//retriing 

посмотреть, как это просто.

Теперь, когда страница загружается, просто проверьте пользовательскую привилегию. сверху переменной в памяти и, соответственно, включить/отключить autoplay свойство аудио и проверить/снимите флажок

теперь приходит самая важная часть: метод load()

Метод нагрузки() используется для обновления аудио/видео элемент после изменения источника или других настроек.

load() функция является сердцем этого кода обновляет ваш аудио элемент с помощью новой конфигурации., но без фактического обновления страницы или редактирования HTML физически, по сути, он дает вам эффект динамической разметки.

посмотреть, как нагрузка() используется ниже проверка функции()

var chkAutoPlay = document.getElementById('disableAutoplay'); 
var myAudio = document.getElementById('myAudio'); 

function check(that){ 
    if (that.checked)    //checkbox is checked 
    { 
     myAudio.autoplay=false; 
     localStorage.setItem('disableAP','yes'); 

    } else {      //checkbox is not checked     
     myAudio.autoplay=true; 
     localStorage.setItem('disableAP','no'); 
     myAudio.load(); 
    } 
} 

наконец назначить обработчик события для флажка

document.getElementById('disableAutoplay').onchange=check; 

Демо: https://jsfiddle.net/sanddune/oz0nhv2k/