Блог

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

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

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

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

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

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

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

Из MDN

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

Во-первых, не назначайте автозапуск вообще в вашем HTML

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

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

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

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

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

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

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

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

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

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

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

 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 /