基于cookie设置html音频播放/暂停(只适用于暂停，但不适用于播放)

Question

我试图让背景音频记住播放/暂停状态。我已经实现了暂停它并将暂停状态存储在cookie中，所以当我在第一页和第二页之间时，它保持暂停(与最初在两个页面上的自动播放相比)，但是当我单击“播放”之后并刷新页面时，即使cookie在检查器中更改为"false“，音频也不会播放，div颜色也不会更改为绿色。

现场演示https://timcliss.webflow.io/audio-test

科德芬

这是代码

外部脚本

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>

<div class="div" id="toggle"> PLAY/PAUSE </div>
<audio id="player" src="https://storage.yandexcloud.net/timcliss/About.mp3" autoplay loop> 

CSS

.div {
background-color:green;
height: 50px;
color: white;
text-align: center;
}

JS

var audio = $('#player')[0];
audio.volume = 0.5;

var isMuted = Cookies.get('playerMuted'); // Receive stored cookie
if(isMuted) // If muted, stop the player
{
$('#player')[0].pause();
$('#toggle').css({'background-color': 'red'});
} 
else
{
$('#player')[0].play();
$('#toggle').css({'background-color': 'green'});
}

// This function will be called when you click the toggle div
function toggleMute() 
{
if(isMuted) // If player is muted, then unmute it
{
$('#player')[0].play();
$('#toggle').css({'background-color': 'green'});
isMuted = false;
} else // Else mute it
{
$('#player')[0].pause();
$('#toggle').css({'background-color': 'red'});
isMuted = true;
}
Cookies.set('playerMuted', isMuted); // Save current state of player
}

$('#toggle').click(toggleMute);

Answer 1

解决了，结果我只需要用

if(isMuted=='true')

然后是isMuted = 'false'; or isMuted = 'true';

这是更新笔

在启用自动播放的情况下，像Chrome中的时钟一样工作！:)

Safari对自动播放更严格，所以我添加了一个检查，只运行Chrome的代码，运行Safari的标准播放器

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if(isSafari){ 
alert('Is safari');
//Do something

} else {
alert('Is other browser');
// Do something
}

如果有人在Safari中找到了自动播放的解决方案，或者您需要帮助在Chrome中实现它，请告诉我！

Answer 2

在新的浏览器中，不支持音频自动播放，用户必须显式播放音频，这就是play部件无法工作的原因。你可以在这里读到更多关于它的信息(https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)。