如何在Chrome上自动播放音频 [英] How to make audio autoplay on chrome

问题描述

音频自动播放功能也可以在Mozilla，Microsoft Edge和旧版google chrome中使用，但不能在新版google chrome中使用. 他们阻止了自动播放.有什么方法可以使其在Google chrome中自动播放音频?

解决方案

解决方案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文件的好来源沉默. mp3

然后轻松播放真正的音频文件.

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

我个人更喜欢 解决方案#2 ，因为这是一种更简洁的方法，因为它不需要太多依赖JavaScript.

2019年8月更新

解决方案3

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

对于 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>元素不起作用.

audio autoplay working in Mozilla, Microsoft edge and old google chrome as well but not in new google chrome. they have blocked the autoplay. is there any way to make it audio autoplay in google chrome?

解决方案

Solution #1

My solution here is to create an iframe

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

and audio tag aswell for non-chrome browsers

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

and in my 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 
  }

Solution #2:

There is also another workaround for this according to @Leonard

Create an iframe that doesn't play anything just to trigger the autoplay in the first load.

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

good source for the mp3 file silence.mp3

Then play your real audio file at ease.

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

Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.

Update August 2019

Solution #3

As an alternative we can use <embed>

For Firefox It seems that audio auto-play is working so we don't need the <embed> element because it will create double audio running.

// 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.
}

Also if you have a toggle event for your audio make sure to remove the created <embed> element for audio.

Note: After your toggle, it will restart from the beginning because the <embed> is already deleted and the <audio> element will play as normal now.

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

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

And now make sure to hide these <audio> and <embed> elements

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

Note: diplay: none and visibility: hidden will make the <embed> element not work.

这篇关于如何在Chrome上自动播放音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！