Question

我是一名电台节目主持人，并在我的网站上设置了我的广播的mp3流媒体自动播放（我知道，我知道，只是幽默我）。使用HTML5音频标签，我希望有人在第一次访问我的网站时自动播放音频。

但是，我希望他们能够选中一个复选框，结果是音频永远不会再为他们自动播放，除非他们取消选中该复选框。

此复选框应出现在音频播放器下方，并从＆＃34; true＆＃34;更改自动播放标签。到＆＃34;假＆＃34;。

我已经看过会停止自动播放的插件，但是我无法在线找到任何代码来提供自己的选项，这只是为了显示有多少人不加选择地使用自动播放。如果不提供禁用选项，我绝不会梦想使用它。

经过一些快速的研究后，我将以下代码放在一起，但由于我是一个n00b编码器，我无法使其工作。我哪里出错了什么是最优雅的解决方案？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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/

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

1 个答案: