音频自动播放工作在Mozilla,微软边缘和旧的谷歌浏览器,但不是新的谷歌铬。他们阻止了自动播放。有没有办法让它在谷歌浏览器中自动播放?
解决方案#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的更干净的方法。
今天我一直在敲打这个,我只是想在讨论中添加一些我发现的好奇心。
无论如何,我已经离开了这个:
<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次应该做的伎俩),音频将自动播放,然后它将在sigle刷新时播放几次只会返回它的邪恶方式。太棒了!
在谷歌发布的声明中,它表示要“自动”播放媒体文件,必须在用户和网站之间进行互动。因此,迄今为止我设法提出的最佳“解决方案”是添加一个按钮,使文件的播放效果低于自动,但更稳定/可靠。
如果原点具有自动播放权限,则可以使用<iframe src="link/to/file.mp3" allow="autoplay">
。更多信息here。
我用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>
它也适用于移动设备,但用户必须触摸屏幕上的某个位置才能触发声音。
默认的HTML5音频自动播放属性在chrome中不起作用,但您可以使用JavaScript强制进行音频自动播放。试试这个:
document.getElementById('myAudio').play();
这适合我。
<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>
在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/
截至2018年4月,Chrome的自动播放政策发生了变化:
“Chrome的自动播放政策很简单:
如果符合以下条件,则允许自动播放声音
也
Chrome的开发者网站提供了更多信息,包括一些编程示例,可以在这里找到:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
只需添加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>
至少你可以用这个:
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
当用户点击页面的任何位置时,音乐即开始播放。
它还会立即删除EventListener,因此如果您使用音频控件,用户可以将其静音或暂停,并且当他点击其他位置时音乐不会再次启动。
谷歌上个月改变了他们关于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>
使用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>