javascript - 提供禁用音频自动播放的选项

Question

我是一名电台主持人，我的广播的 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)" />

Answer 1

来自MDN

autoplay: A Boolean attribute; if specified (even if the value is "false"!), the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading

首先不要在 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() 方法

The load() method is used to update the audio/video element after changing the source or other settings.

load() 函数是此代码的核心，它使用新分配的配置刷新您的音频元素。但本质上实际上没有刷新页面或物理编辑 HTML它给你动态标记的效果。

看看下面在 check() 函数中如何使用 load()

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/