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

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的更干净的方法.

  • 从Chrome 76开始似乎已破产。 (7认同)
  • 是的,这不再起作用了(如果它过去起作用的话) (4认同)
  • 目前过时的解决方案不再有效。 (4认同)
  • 沉默文件的链接已经死了,所以我在GitHub上找到了一些其他的静音文件:https://github.com/anars/blank-audio.我正在使用`1-second-of-silence.mp3`作为我的项目,但我猜这个集合中的任何文件都可以. (2认同)
  • 听起来这个答案可能“[现在会带来安全风险或提供不再有效的代码](https://meta.stackoverflow.com/q/405302/924299)”。 (2认同)

小智 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/

  • 是的,他们正在努力......在 Firefox 或 Chrome 中不再工作 (6认同)
  • 好吧,虽然这确实有效,但它也感觉它正在利用一个错误,或者至少是非预期的行为.我想有人会向谷歌报告,所以我不会依赖它长时间工作.很好找! (3认同)
  • 稍微偏离主题,但你的沉默.mp3相当大,为36.7k.试试这个(216字节) - https://s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3 (3认同)
  • silence.mp3链接已死。您[可以创建自己的](/sf/answers/1170017901/)。 (2认同)

Pau*_*ker 8

至少你可以使用这个:

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}
Run Code Online (Sandbox Code Playgroud)

当用户点击页面上的任何地方时,音乐就会开始。

它还会立即删除 EventListener,因此如果您使用音频控件,用户可以将其静音或暂停,并且当他单击其他地方时音乐不会再次开始。

  • Chrome 因强制播放而引发违规。 (2认同)

小智 7

自2018年4月起,Chrome的自动播放政策已更改:

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

  • 始终允许静音自动播放。

在以下情况下,允许自动播放声音:

  • 用户已与域进行了交互(单击,点击等)。
  • 在台式机上,已经超过了用户的“媒体参与度索引”阈值,这意味着该用户以前曾播放有声视频。
  • 在移动设备上,用户已将该站点添加到他或她的主屏幕。

  • 顶级框架可以将自动播放权限委派给其内联框架,以允许自动播放声音。”

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

  • 所以您是说没有办法在Chrome浏览器中自动播放音频? (3认同)

Man*_*ves 6

只需按照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)

  • 它不再起作用了吗?收到此消息:“ AudioContext不允许启动。必须在页面上用户手势后恢复(或创建)。https://developers.google.com/web/updates/2017/09/autoplay-policy -changes#webaudio” (2认同)
  • 在 Mac 上使用 Chrome 81.0.4044.138 (2认同)

Mur*_*ARI 5

由于广告,浏览器已将其隐私更改为自动播放视频或音频,这很烦人。所以你可以用下面的代码来欺骗。

\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


Vit*_*cus 5

在地址栏上单击“站点设置”,或者复制此地址 ( localhost ),然后在“声音 chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost”上选择“允许”


Mar*_*ute 0

<iframe src="link/to/file.mp3" allow="autoplay">如果源具有自动播放权限,您可以使用。更多信息请点击这里