Aks*_*hod 50 html5 google-chrome html5-audio
音频自动播放工作在Mozilla,微软边缘和旧的谷歌浏览器,但不是新的谷歌铬.他们阻止了自动播放.有没有办法让它在谷歌浏览器中自动播放?
jt2*_*t25 79
解决方案#1
我的解决方案是创建一个 iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
Run Code Online (Sandbox Code Playgroud)
并audio
标记以及非Chrome浏览器
<audio autoplay loop id="playAudio">
<source src="audio/source.mp3">
</audio>
Run Code Online (Sandbox Code Playgroud)
在我的 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
}
Run Code Online (Sandbox Code Playgroud)
解决方案#2:
根据@Leonard,还有另一种解决方法
创建一个iframe
不会播放任何东西只是为了在第一次加载时触发自动播放.
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
Run Code Online (Sandbox Code Playgroud)
mp3文件silence.mp3的良好来源
然后轻松播放您的真实音频文件.
<audio id="player" autoplay loop>
<source src="audio/source.mp3" type="audio/mp3">
</audio>
Run Code Online (Sandbox Code Playgroud)
我个人更喜欢解决方案#2,因为它不是那么依赖JavaScript的更干净的方法.
小智 18
在chrome中使用音频标签的自动播放功能有一个非常巧妙的技巧.
加
<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>
Run Code Online (Sandbox Code Playgroud)
而silence.mp3
只有0.5秒的沉默.
这个
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
Run Code Online (Sandbox Code Playgroud)
事后工作.
Chrome会注意到已播放声音,并在音频标签中提供自动播放权限.
看到它的实际效果:http://deinesv.cf/
至少你可以使用这个:
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
Run Code Online (Sandbox Code Playgroud)
当用户点击页面上的任何地方时,音乐就会开始。
它还会立即删除 EventListener,因此如果您使用音频控件,用户可以将其静音或暂停,并且当他单击其他地方时音乐不会再次开始。
小智 7
自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>
Run Code Online (Sandbox Code Playgroud)
比这将您想要的工作:
<audio autoplay>
<source src="hal_9000_sorry_dave.mp3">
</audio>
Run Code Online (Sandbox Code Playgroud)
由于广告,浏览器已将其隐私更改为自动播放视频或音频,这很烦人。所以你可以用下面的代码来欺骗。
\n\n您可以将任何无声音频放入 iframe 中。
\n\n<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>\n<audio autoplay>\n <source src="youraudiofile.mp3" type="audio/mp3">\n</audio>\n
Run Code Online (Sandbox Code Playgroud)\n\n只需添加一个以 .mp3 作为源的不可见 iframe,并在音频元素之前允许 =“autoplay”。结果,浏览器被欺骗启动任何后续的音频文件。或者自动播放\xe2\x80\x99t 静音的视频。
\n在地址栏上单击“站点设置”,或者复制此地址 ( localhost ),然后在“声音 chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost”上选择“允许”
归档时间: |
|
查看次数: |
112802 次 |
最近记录: |