如何在铬合金上进行音频自动播放

音频自动播放在 Mozilla，MicrosoftEdge 和旧的谷歌浏览器中也可以使用，但是在新的谷歌浏览器中不能使用。

他们已经阻止了自动播放。有没有办法让它在谷歌浏览器的音频自动播放？

440662 次浏览
小开

你可以使用 <iframe src="link/to/file.mp3" allow="autoplay">，如果起源有一个自动播放权限。更多信息 给你。

小开

谷歌上个月改变了他们关于 Chrome 内部自动播放的政策。请看这个 公告。

但是，如果你嵌入一个视频并且是静音的，它们允许自动播放。您可以添加 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>
小开

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

“ Chrome 的自动播放策略很简单:

  • 静音自动播放总是允许的。

允许自动播放声音，如果:

  • 用户与域交互(点击，点击等)。
  • 在桌面上，用户的媒体参与索引阈值已经 交叉，意味着用户以前已经播放声音视频。
  • 在移动设备上，用户已经将网站添加到他或她的主屏幕上。

还有

  • 顶帧可以将自动播放权限委托给它们的 iframe，以允许 带声音的自动播放。 "

Chrome 的开发者网站有更多的信息，包括一些编程示例，可以在这里找到: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

小开

至少你可以用这个:

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

当用户单击页面上的任何位置时，音乐开始。

它也立即删除 EventListener，所以如果您使用音频控件，用户可以静音或暂停它，音乐不会再次启动时，他点击其他地方。.

小开

我使用 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>

它也适用于移动设备，但用户必须触摸屏幕上的某个地方才能触发声音。

小开

解决方案一

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

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

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

<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文件 安静 mp3的好来源

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

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

就我个人而言，我更喜欢 解决方案 # 2，因为它是不依赖于 JavaScript 的更干净的方法。

2019年8月更新

解决方案三

作为一个替代方案，我们可以使用 <embed>

对于 < strong > Firefox 这似乎是音频自动播放工作，所以我们不需要的 <embed>元素，因为它将创建双音频运行。

// index.js
let audioPlaying = true,
backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
$('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
backgroundAudio = setInterval(function() {
$("#background-audio").remove();
$('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
}, 120000); // 120000 is the duration of your audio which in this case 2 mins.
}

此外，如果您有一个切换事件为您的音频确保删除创建的 <embed>元素的音频。

注意: 切换之后，它将从头开始重新启动，因为 <embed>已经被删除，现在 <audio>元素将正常运行。

$(".toggle-audio").on('click', function(event) {
audioPlaying = !audioPlaying;
$("#background-audio").remove();


clearInterval(backgroundAudio);
if (audioPlaying){
$(".audio1").play();
// play audio
}
else {
$(".audio1").pause();
}

现在确保隐藏这些 <audio>和 <embed>元素

audio, embed {
position: absolute;
z-index: -9999;
}

注意: diplay: none和 visibility: hidden将使 <embed>元素不工作。

小开

只需添加 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>
小开

有一个真正巧妙的技巧，使用铬的音频标签的自动播放功能。

加

<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 注意到一个声音已经播放，并允许在音频标签中自动播放。

小开

改为使用 iframe:

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

临时修理

$(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日重新启用

小开

我添加控件属性太标记音频，并简单地隐藏在 CSS 中。 在 Chrome 中一切运行良好。

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

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

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

这对我有用。

小开

我今天一直在研究这个我只是想在讨论中加入一点我发现的古玩。

无论如何，我已经离开了这个:

<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次应该可以达到这个效果) ，音频会自动播放，然后它会在一次刷新中播放几次，然后回到它的邪恶方式。 太棒了！

谷歌在声明中表示，要让媒体文件“自动”播放，用户和网站之间必须进行互动。所以到目前为止，我设法想出的最好的“解决方案”是添加一个按钮，使文件的播放不那么自动，但是更加稳定/可靠。

小开

不使用 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>

小开

浏览器已经改变了他们的隐私自动播放视频或音频由于广告，这是恼人的。因此，您可以使用以下代码进行欺骗。

你可以在 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>

只需添加一个不可见的 iframe。Mp3作为它的源，并且在音频元素之前允许 = “ autoplay”。结果，浏览器被骗去启动任何后续的音频文件。或者自动播放一段没有静音的视频。

小开

你可以简单地使用(. 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>
小开

视频标签也可以播放音频。鉴于音频标签似乎没有表现出应有的功能，你可以直接使用音频标签:

<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>
小开

[2021年9月7日]
几天前刚刚收到一些反对票，我想我必须澄清一下: 此解决方案要求用户将鼠标悬停在网页上方才能工作没有用户交互，在 chrome 上播放声音是不可能的，因为它是故意被屏蔽的。互联网上现在充斥着令人生畏的广告，没有人希望他们的浏览器在访问网站时发出来自广告的垃圾声音。

2021年12月22日我是一个传播错误信息的小丑
结果发现有些人没有抓住这个方法的重点。必须的用 <div>将 <body>部分中的所有部分封装起来，如原始描述中的状态所示。这将使 没有在 jsfiddle 上工作，因为它使用一个嵌入式 <iframe>文档，这正是 Chrome 应该阻止的。

2021年12月24日
原来我是个小丑。每当用户登录的域名与他们访问的最后一个页面不同时，Chrome 就会阻止自动播放。下面是我做的一些演示:

  • 如果您通过 这个链接访问自动播放演示，它将正常工作。
  • 但是，由于目标域与此页面不同，因此 这种直接联系不能正常工作。

[原创]
如果你觉得用 <div>标签封装整个 HTML <body>没问题，这是我的解决方案，它可以在 Chrome 88.0.4324.104(2021年1月23日的最新版本)上运行。

首先，添加音频部分以及下面 <body>部分开头的一段脚本:

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


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

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

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

小开

我想我应该加上我发现的对我们的解决方案有用的东西。我们将在我们的域中托管一个网站，我们可以将该网站添加到 Chrome 的设置，以允许自动播放。

我明白为什么自动播放通常是有点繁重，但在这种情况下，对我们的组织来说，允许它是有意义的。

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

在 ASP.NET Core MVC 的开发中，我只是添加了这个词: Localhost，这让它为我工作(* 注意，它需要添加到 Chrome Browser Visual Studio 中自动打开)。

小开

在地址栏上单击 网站设定，或复制此地址(本地主机) ，然后选择声音 允许 Chrome://sets/content/siteDetails? site = https% 3A% 2F% 2Flocalhost

小开

自2020年以来，这是一个浏览器相关的设置，不能由 html 代码启用。在大多数浏览器上，自动播放默认被阻止。你可以在这里找到它:

Firefox: 在哪里启用/禁用自动播放

Chrome: 在哪里启用/禁用自动播放

小开

这个小把戏对我很有用。我用了一个视频标签。自动播放静音视频，并在窗口的加载事件上将静音属性设置为 false。

<video autoplay loop muted>
<source src="sample.mp3" />
</video>


<script>
window.onload = function () {
document.querySelector("video").muted = false;
};
</script>

提交答案