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

问题描述 投票:35回答:14

音频自动播放工作在Mozilla,微软边缘和旧的谷歌浏览器,但不是新的谷歌铬。他们阻止了自动播放。有没有办法让它在谷歌浏览器中自动播放?

html5 google-chrome html5-audio
14个回答
76
投票

解决方案#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的更干净的方法。


0
投票

今天我一直在敲打这个,我只是想在讨论中添加一些我发现的好奇心。

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

<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刷新时播放几次只会返回它的邪恶方式。太棒了!

在谷歌发布的声明中,它表示要“自动”播放媒体文件,必须在用户和网站之间进行互动。因此,迄今为止我设法提出的最佳“解决方案”是添加一个按钮,使文件的播放效果低于自动,但更稳定/可靠。


-1
投票

如果原点具有自动播放权限,则可以使用<iframe src="link/to/file.mp3" allow="autoplay">。更多信息here


-1
投票

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

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


-1
投票

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

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

这适合我。


-1
投票

Solution without using iframe, or 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>

16
投票

在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/


6
投票

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

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

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

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

  • 用户已与域进行了互动(点击,点击等)。
  • 在桌面上,用户的媒体参与度指数阈值已超过,这意味着用户之前已播放带有声音的视频。
  • 在移动设备上,用户已将该网站添加到他或她的主屏幕。

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

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


5
投票

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

1
投票

至少你可以用这个:

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

当用户点击页面的任何位置时,音乐即开始播放。

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


1
投票

谷歌上个月改变了他们关于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>

0
投票

使用iframe代替:

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

0
投票

临时修复

$(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日重新播放


0
投票

我将控件属性添加到标签音频,并将其隐藏在CSS中。一切都在Chrome中运行良好。

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>
© www.soinside.com 2019 - 2024. All rights reserved.