是否有任何解决方法（或破解）可以在 Chrome、Firefox 和 Safari 上自动播放音频？答案

【问题标题】：Is there any workaround (or hack) to make the audio autoplay on Chrome, Firefox and Safari?是否有任何解决方法（或破解）可以在 Chrome、Firefox 和 Safari 上自动播放音频？
【发布时间】：2019-09-19 02:37:27
【问题描述】：

我有一个动画项目，需要在所有主要浏览器上自动播放音频，包括手机上的那些。我们还需要控制音频，使其在暂停并再次播放后继续播放。这意味着我们不能使用iframe，因为它每次都会重播音频。另外，只是发现iframe 现在无法在 Chrome 中自动播放... 是否有任何解决方法可以解决此问题？

【问题讨论】：

make it continue playing after it paused - 但它已暂停
对不起，我的意思是在它再次播放之后。我只是编辑问题。

标签： javascript google-chrome firefox audio autoplay

【解决方案1】：

所有这些浏览器都要求您的用户提供一个手势来确认他们确实希望您的页面产生声音。

所以你需要做的就是邀请你的用户来做这个user-gesture。

为了完全安全，您将从这个用户手势触发的事件（Safari 实际需要）调用您希望控制的 MediaElement 的 play() 方法，然后您将完全控制它媒体元素：

// original samples from wikimedia
// https://en.wikipedia.org/wiki/Category:The_Beatles_audio_samples

const audio = new Audio("https://dl.dropboxusercontent.com/s/0eio842lwj1x5dj/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.mp3");
audio.repeat = true;
audio.volume = 0;

document.getElementById( 'btn' ).onclick = e => {
  document.getElementById( 'splash' ).remove();
  audio.play().then( () => {
    audio.currentTime = 0;
    audio.pause();
    audio.volume = 1;
    startTimers();
  });
};

function startTimers() {
  setTimeout( playAudio, 2000 );
  setTimeout( pauseAudio, 3000 );
  setTimeout( playAudio, 6000 );
  setTimeout( changeSrc, 7000 );
  setTimeout( pauseAudio, 15000 );
  setTimeout( playAudio, 60000 );
  setTimeout( pauseAudio, 70000 );
}
function playAudio() {
  console.log('playing');
  audio.play();
}
function pauseAudio() {
  console.log('pausing');
  audio.pause();
}
function changeSrc() {
  console.log('changing src');
  audio.src = "https://dl.dropboxusercontent.com/s/okbnk1ycupxrrb2/_Sgt._Pepper%27s_Lonely_Hearts_Club_Band_by_the_Beatles_1967%20%281%29%20%28online-audio-converter.com%29.mp3";
  audio.play();
}

#splash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#splash p { display: inline-block }

<div id="splash">
  <button id="btn"><h1>Start the awesome</h1></button>
</div>

【讨论】：

是的，我知道我们需要让用户触发音频才能播放。但是是否可以跳过触发事件并让音频自动播放？
@Nicole 不，你至少需要一次（但只需要一次）
@Kaiido 那么这个网页是怎么做到的：trump.tv/video/2GlqpgCRIYg
@SirLemuel 没有任何东西会自动为我播放。也许您确实允许 YT 在您的浏览器设置中自动播放视频？
似乎它只适用于我的 Chrome 而不是 Safari。

【解决方案2】：

浏览器上不再有自动播放音频。我建议阅读这些内容。：

Google's article Autoplay policy chghanges
MDN's Autoplay guide
Webkits autoplay policy

有很多很好的信息，为什么它会像现在这样工作以及如何做。

【讨论】：

【解决方案3】：

当您尝试在没有用户先与文档交互的情况下自动播放音频时，会引发错误。所以关键是让用户首先与文档进行交互。

您可以做的是，当用户打开页面时，他必须先点击某处或某个按钮以使实际内容可见，然后在点击交互后播放音频。

要捕获错误，请参阅Extend the DOM Element, Handle the Error, and Degrade Gracefully。

PS：我注意到在切换选项卡时，重新加载您切换到的选项卡并切换回+重新加载它可以正常工作，无需任何解决方法。不是解决方案，我只是想知道为什么会发生这种情况（我使用的是最新的 Chrome）。它必须触发文档交互而不做任何事情

【讨论】：