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

Posted 2023-03-05

【中文标题】提供禁用音频自动播放的选项

【英文标题】：Offer option to disable audio autoplay

【发布时间】：2017-02-17 16:43:34

【问题描述】：

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

【问题讨论】：

“禁用自动播放”是什么意思？用户在第一次访问您的页面之前无法执行此操作。首先加载页面，然后您的播放器开始播放或等待用户操作，具体取决于 autload 道具，之后用户可以单击您的复选框

【参考方案1】：

来自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它给你动态标记的效果。

看看下面的 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/