不使用iframe或javascript的解决方案：

Question

音频自动播放在Mozilla，Microsoft边缘和旧版谷歌浏览器中工作，但在新的谷歌浏览器中没有。他们阻止了自动播放。有没有办法让它在谷歌浏览器中自动播放？

Answer 1

解决方案＃1

我在这里的解决方案是创建一个iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>

和audio标签也适用于非Chrome浏览器

<audio autoplay loop  id="playAudio">
      <source src="audio/source.mp3">
    </audio>

和我的script

  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    if(!isChrome){
      $('#iframeAudio').remove()
    }
  else{
     $('#playAudio').remove() //just to make sure that it will not have 2x audio in the background 
  }

解决方案2：

根据@Leonard

，还有另一种解决方法

创建一个不会播放任何内容的iframe只是为了在第一次加载时触发自动播放。

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

mp3文件silence.mp3

的良好来源

然后轻松播放真正的音频文件。

<audio id="player" autoplay loop>
    <source src="audio/source.mp3" type="audio/mp3">
</audio>

我个人更喜欢 解决方案＃2 ，因为这是一种更简洁的方法，因为它不需要太多依赖JavaScript。

Answer 2

在chrome中使用音频标签的自动播放功能真的很巧妙。

添加

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

silence.mp3只有0.5秒的沉默。

此

<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

随后可以工作。

Chrome注意到已播放声音，并允许在音频标签中自动播放。

查看实际情况：http://deinesv.cf/

Answer 3

截至2018年4月，Chrome的自动播放政策发生了变化：

“Chrome的自动播放政策很简单：

始终允许静音自动播放。

如果符合以下条件，则允许声音自动播放：

用户已与域进行了互动（点击，点击等）。
在桌面设备上，用户的媒体参与度指数阈值已经达到交叉，意味着用户之前播放了带声音的视频。
在移动设备上，用户已将网站添加到他或她的主屏幕。

另外

热门框架可以将自动播放权限委托给他们的iframe以允许自动播放声音。 “

Chrome的开发者网站提供了更多信息，包括一些编程示例，可在此处找到：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 4

只需按照https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

所示添加此小脚本

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

这将按您的意愿工作：

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Answer 5

您可以按以下方式简单地使用（.autoplay = true;）（在Chrome桌面上经过测试）：

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

如果您需要添加停止/播放按钮：

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

如果您希望停止/播放成为一个按钮：

<button onclick="PlayStop()" type="button">button</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

如果要在同一按钮上显示停止/播放：

<button onclick="PlayStop()" type="button">Play</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

在某些浏览器中，音频可能无法正常工作，因此，请尝试在代码之前添加iframe：

<iframe src="dummy.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

<button onclick="PlayStop()" type="button">Play</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Answer 6

由于广告的困扰，浏览器已将其隐私权更改为自动播放视频或音频。因此，您可以使用下面的代码来欺骗。

您可以在iframe中放置任何无声音频。

<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay>
    <source src="youraudiofile.mp3" type="audio/mp3">
</audio>

只需添加一个以.mp3作为其源的不可见iframe，并在音频元素之前添加=“ autoplay”即可。结果，浏览器被诱骗启动任何后续音频文件。或自动播放未静音的视频。

Answer 7

谷歌上个月改变了关于Chrome内部自动播放的政策。请参阅此announcement。

但是，如果您要嵌入视频并且它已静音，它们会允许自动播放。您可以添加muted属性，它应该允许视频开始播放。

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Answer 8

至少您可以使用此：

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

当用户在页面上的任意位置单击时，音乐就会开始播放。

它还会立即删除EventListener，因此，如果您使用音频控件，则用户可以将其静音或暂停，并且在他单击其他位置时音乐也不会重新开始。

Answer 9

如果您同意将整个 HTML <body> 包含一个 <div> 标记，这是我的解决方案，它适用于 Chrome 88.0.4324.104（截至 1 月 23 日的最新版本， 2021）。

首先，在 <body> 部分的开头添加音频部分以及如下所示的一段脚本：

<audio id="divAudio">
   <source src="music.mp3" type="audio/mp3">
</audio>

<script>
   var vAudio = document.getElementById("divAudio");
   function playMusic()
   {
      vAudio.play();
   }
</script>

其次，将整个 HTML <body> 内容（不包括上面显示的插入代码段）包含在一个虚拟部分 <div onmouseover="playMusic()"> 中。如果您的 HTML <body> 内容已包含在全局 <div> 部分中，则只需在该 onmouseover="playMusic()" 中添加 <div> 标记。

该解决方案的工作原理是通过将鼠标悬停在网页上触发 playMusic() 函数并欺骗 Chrome“认为”用户已经做了一些事情来播放它。该解决方案还带来了一个好处，即音频片段只会在用户浏览该页面时播放。

Answer 10

今天我一直在努力解决这个问题，我只想添加一些我在讨论中发现的古玩。

无论如何，我已经摆脱了：

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
  <source src="helloworld.mp3">
</audio>

此：

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

最后，这是一个“解决方案”，如果您只想生成自己的东西（我们这样做），那就有些超出范围了：

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

我所做的发现以及真正有趣的（奇怪的？奇怪的？可笑的？）部分是，对于前两个，您实际上可以通过给f5适当的冲击来击败系统。如果您非常快地反复执行刷新操作（大约5-10次即可完成操作），音频将自动播放，然后在单次刷新后播放几次，仅恢复到其邪恶的方式。太棒了！

在Google的公告中说，要使媒体文件“自动”播放，必须在用户和网站之间进行交互。因此，到目前为止，我设法解决的最好的“解决方案”是添加一个按钮，使文件播放比自动播放少，但更加稳定/可靠。

Answer 11

自 2020 年起，这是与浏览器相关的设置，无法通过 html-code 启用。默认情况下，大多数浏览器会阻止自动播放。您可以在这里找到它：

火狐：where to enable/disable autoplay

铬：where to enable/disable autoplay

Answer 12

在地址栏点击站点设置，或者复制这个地址（localhost）并选择允许声音 chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost

Answer 13

我想我会添加我发现的适用于我们的解决方案的内容。我们将在我们的域中托管一个网站，我们可以将该网站添加到 Chrome 的设置中以允许自动播放。

我理解为什么自动播放通常有点麻烦，但在这种情况下，对于我们的组织来说，允许它是有意义的。

Chrome 中允许通过 URL 自动播放的位置是：chrome://settings/content/sound?search=sound

在使用 ASP.NET Core MVC 进行开发时，我刚刚添加了一个词：Localhost 并且它对我有用（*注意它需要在 Chrome 浏览器中添加，Visual Studio 会自动打开）。

Answer 14

视频标签也可以播放音频。鉴于音频标签似乎没有应有的表现，您可以将视频标签用于音频：

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

Answer 15

我也添加了controls属性来标记音频，然后将其隐藏在CSS中。一切都可以在Chrome中正常运行。

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>

Answer 16

临时修复

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

或使用自定义播放器触发播放 http://zohararad.github.io/audio5js/

注意：自动播放功能将于12月31日启用

Answer 17

改为使用iframe：

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

Answer 18

不使用iframe或javascript的解决方案：

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

使用此解决方案，还可以避免Internet Explorer的打开/保存对话框。

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>

Answer 19

默认的HTML5 音频自动播放属性在chrome中不起作用，但是您可以使用JavaScript强制音频自动播放。试试这个：

document.getElementById('myAudio').play();

这对我有用。

Answer 20

使用 HTML 中的 Autoplay 属性自动播放音频或视频。

<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

Answer 21

我使用pixi.js和pixi-sound.js在chrome和firefox中实现了自动播放。

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML：

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

它也可以在移动设备上使用，但是用户必须触摸屏幕上的某个位置才能触发声音。

Answer 22

如果原点具有自动播放权限，则可以使用@^。更多信息here。

如何在chrome上制作音频自动播放

22 个答案:

不使用iframe或javascript的解决方案：