Google chrome 如何在chrome上进行音频自动播放

音频自动播放在Mozilla、Microsoft Edge和旧的Google Chrome中也可以使用，但在新的Google Chrome中却不能使用

---

他们已经封锁了自动播放。有没有办法在Google Chrome中实现音频自动播放？

如果源站具有自动播放权限，您可以使用

。更多信息。

谷歌上个月改变了关于Chrome内部自动播放的政策。请看这个

然而，如果你正在嵌入一个视频并且它是静音的，它们允许自动播放。您可以添加

mute

属性，它应该允许视频开始播放

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

您的浏览器不支持视频标记。

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

“Chrome的自动播放策略很简单：

• 始终允许静音自动播放

在以下情况下，允许自动播放声音：

• 用户已与域交互（单击、点击等）
• 在桌面上，用户的媒体参与度指数阈值已设置 划线，表示用户以前播放过带有声音的视频
• 在手机上，用户已将网站添加到其主屏幕

也

• 顶部框架可以将自动播放权限委托给其iFrame，以允许 自动播放声音。 "

---

Chrome的开发者网站提供了更多信息，包括一些编程示例，可在此处找到：

至少您可以使用：

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

当用户单击页面上的任意位置时，音乐开始播放

---

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

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

PIXI.sound.sound.from({
url:'audios/tuto.mp3'，
循环：对，
预加载：正确，
已加载：功能（错误、声音）{
声音。播放（）；
document.querySelector（“#暂停”）.addEventListener（'click'，function（）{
const paused=PIXI.sound.togglePauseAll（）；
this.className=this.className.replace（/\b（on | off）/g'）；
this.className+=暂停？'on'：'off'；
});
}
});

HTML:

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

解决方案#1

我的解决方案是创建一个

iframe

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

在我的

脚本中

  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>

现在确保隐藏这些

和

元素

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

---

注意：

diplay:none

和

可见性：hidden

将使

元素无法工作。

只需添加此小脚本，如中所示

window.onload=函数（）{
var context=新的AudioContext（）；
}

这将按照您的需要工作：

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

---

在chrome中使用音频标签的自动播放功能有一个非常巧妙的技巧

加

之后工作

---

Chrome注意到已播放声音，并允许自动播放音频标签。

使用

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()
});

或者使用自定义播放器触发播放

---

注意：Autoplay将于12月31日重新启用

我将控件属性添加到标记音频中，只需将其隐藏在CSS中即可。 所有这些都在铬合金中工作良好

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

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

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

---

这对我来说很有用。

我今天一直在讨论这个问题，我只是想在讨论中添加一点我发现的趣事

不管怎样，我已经离开了：

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

这：

document.getElementById（“myAudio”）.play（）；

最后，这是一个“解决方案”，如果您只想生成您自己的东西（我们会这样做），那么这个“解决方案”有些超出了范围：

我的发现以及真正有趣的部分（奇怪？古怪？可笑？）是，在前两种情况下，你可以通过给f5一个适当的重击来击败系统；如果你很快地重复按“刷新”（大约5-10次应该可以做到），音频将自动播放，然后在单次刷新时播放几次，只会返回到其邪恶的方式。 太棒了

在谷歌发布的公告中，它表示，要“自动”播放媒体文件，用户和网站之间必须进行交互。因此，到目前为止，我想出的最好的“解决方案”是添加一个按钮，使文件播放不那么自动，但更稳定/可靠。

解决方案不使用iframe或javascript：

使用此解决方案，还避免了Internet Explorer的“打开/保存”对话框

---

由于令人讨厌的广告，浏览器已将其隐私更改为自动播放视频或音频。因此，您可以使用下面的代码进行欺骗

您可以在iframe中放置任何静音音频

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

只需添加一个以.mp3为源的不可见iframe，并在音频元素之前添加allow=“autoplay”。结果，浏览器被诱骗启动任何后续音频文件。或者自动播放未静音的视频。

您可以简单地使用（.autoplay=true；）如下（在Chrome桌面上测试）：

var myaudio=document.getElementById（“audioID”）.autoplay=true；

如果需要添加停止/播放按钮：

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

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

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

播放按钮
停止按钮
var myaudio=document.getElementById（“audioID”）；
函数play（）{
返回myaudio.play（）；
};
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

<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()
});

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

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

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

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

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

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

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

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

<button onclick="PlayStop()" type="button">button</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

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

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

<audio id="divAudio">
   <source src="music.mp3" type="audio/mp3">
</audio>

<script>
   var vAudio = document.getElementById("divAudio");
   function playMusic()
   {
      vAudio.play();
   }
</script>