如何在Chrome上自动播放音频

94

音频自动播放功能也可以在Mozilla，Microsoft Edge和旧版谷歌浏览器中使用，但不能在新版谷歌浏览器中使用。他们阻止了自动播放。有什么方法可以使其在Google Chrome中自动播放音频？

html  google-chrome  html5-audio 
— 阿克瑟·拉索德（Akshay Rathod）
source
8
谷歌这样做的事实是荒谬的。他们只是说“除非您单击“播放音乐”，否则您的游戏没有音乐”。不能接受 太生气了！
— 霍布斯
2
@霍布斯同意。至少应该有例外。正如我在另一张海报上提到的那样，我有一个“音乐”页面，带有网站链接“ mymusic.html”，您只能使用明确标记为“我的音乐”的链接/按钮进入该页面。 –在示例音乐上播放时感到惊讶或烦恼，尤其是带有清晰的“固定位置”“ STOP MUSIC”（停止音乐）按钮。此政策是对滥用行为反应过度的情况。–
— Randy

Answers:

105

解决方案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。

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>元素不起作用。

— 阿吉比
source
您如何制作音频循环？
— Kwarrtz
1
解决方案2对我有用。旁注：如果您同时使用Web和Phonegap，则Phonegap不需要此解决方法，而这样做确实很麻烦。因此，如果您具有用于Web和Phonegap的通用代码库，请确保找到一种仅将此方法应用于Web的方法。
— 伊格纳西奥·塞古拉
2
静音文件的链接已死，因此我在GitHub上找到了其他一些静音文件：github.com/anars/blank-audio。我正在1-second-of-silence.mp3为我的项目使用，但是我猜这个集合中的任何文件都可以使用。
— 特拉维斯'18
14
似乎破获适用于Chrome 76
— mightyiam
3
是的，这不再起作用了（如果它过去曾经起作用过的话）
— Yulian
28

在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会注意到已经播放了声音，并允许在音频标签中自动播放。

— 伦纳德·斯托克斯
source
6
好的，尽管这样做确实可行，但也感觉像是在利用错误，或者至少是在意料之外的行为。我想有人会向Google报告此事，所以我不会长期依赖它。不错的发现！
— 尼尔·布赖森
5
稍微偏离主题，但您的silence.mp3很大，为36.7k。试试这个（216字节）-s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
— Neil Bryson
3
silence.mp3链接已死。您可以创建自己的。
— idbrii
1
— 尼尔·布赖森
2
是的，他们坚持下去……在Firefox或Chrome中都不再起作用
— Stefan Reich
15

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

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

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

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

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

也

  • 顶部框架可以将自动播放权限委派给其iframe，以允许自动播放声音。”

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

— deltran
source
3
所以您是说没有办法在Chrome浏览器中自动播放音频？
— Akshay Rathod '18
另外，Android中的Chrome浏览器中现在有一个权限选项，用户现在可以选择允许自动播放声音
— zeta
8

只需按照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>
— 曼努埃尔·阿尔维斯（Manuel Alves）
source
您能给我摆个小提琴吗？这会很有帮助
— Vikash
5
它不再起作用了吗？得到这个消息：“AudioContext不允许启动它必须在页面上的用户手势后恢复（或创建）。developers.google.com/web/updates/2017/09/... ”
— thdoan
1
在Mac👍上的Chrome 81.0.4044.138上工作
— Mosh Feu，
5

至少您可以使用以下命令： 

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

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

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

— 保罗·贝克尔
source
我相信这是遵循新政策的正确轨道，这些新政策要求某些用户交互才能播放音乐。我已经将此添加到已经为移动浏览器添加的touch事件中，并且添加了“有时有效”的onscroll事件。不幸的是，“ no play（）”策略似乎并未让鼠标滚轮作为用户交互进行计数，但是我也在努力。关键是，我的页面是一个MUSIC页面，字面上称为“ mymusic.html”，您可以按照标记正确的MUSIC按钮进行操作。因此，如果有一个页面可以证明“在加载时播放”是正确的，那真的应该！
— 兰迪
@Randy我处于非常相似的情况，我正在音乐页面上工作，并且想要实现自动播放。添加autoplay属性的工作方式非常不一致-相同的代码偶尔（但并非总是）可以工作。我没有控制台或网络错误。你解决了你的情况吗？
— Lazarus Rising
@LazarusRising-尽管这似乎都是从手机浏览器开始的，但我注意到较新版本的桌面浏览器也拒绝自动播放。我不得不说，我对由用户交互触发的事件开始播放音乐感到满意。实际上，甚至我作为页面作者也开始发现自己很生气，因为我触摸了屏幕就开始进入页面并开始播放音乐。我开始明白为什么逐步淘汰自动播放的逻辑。而且自从它开始普遍出现以来，我觉得我的网站是唯一无法做到这一点的网站。
— 兰迪
Chrome违反了强制播放规则。
— 加布里埃尔·彼得森
4

您可以按以下方式简单地使用（.autoplay = true;）（在Chrome桌面上经过测试）：

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

<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>
— 沃尔德·阿尔达希（Waleed Aldhahi）
source
似乎并没有工作在Chrome版本85.0.4183.83（正式版本）（64位）
— MC9000
2

由于广告的困扰，浏览器已将其隐私权更改为自动播放视频或音频。因此，您可以使用以下代码欺骗。

您可以将任何无声音频放入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”。结果，浏览器被欺骗来启动任何后续音频文件。或自动播放未静音的视频。

— 村田佳夫
source
1

我今天一直在努力解决这个问题，我只想添加一些我在讨论中发现的古玩。

无论如何，我已经摆脱了：

<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次即可完成操作），音频将自动播放，然后在单次刷新后播放几次，而后又恢复到邪恶的状态。太棒了！

在Google的公告中说，要使媒体文件“自动”播放，必须在用户和网站之间进行交互。因此，到目前为止，我设法解决的最好的“解决方案”是添加一个按钮，使文件播放比自动播放少，但更加稳定/可靠。

— PutoMiké
source
3
依靠用户交互不是自动播放。
— mayyiam
0

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

它也可以在移动设备上使用，但用户必须触摸屏幕上的某个位置才能触发声音。

— 阿克瑟·拉索德（Akshay Rathod）
source
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日启用

— 优素福
source
这不是答案，因为它不是自动播放。
— mayyiam
1
@mightyiam，这是一种解决方法，因为自从chrome阻止了它以来，无法自动播放
— Youssef KH
0

我也添加了控件属性来标记音频，然后将其隐藏在CSS中。而且所有功能都可以在Chrome中正常运行。

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>
— 尤里·博伊科（Yuriy Boyko）
source
1
也许您的该网站的MEI允许自动播放。否则，我看不出有什么用的理由。
— mayyiam
0

Google上个月更改了有关在Chrome中自动播放的政策。请看此公告。

但是，如果您嵌入视频并且将其静音，它们确实允许自动播放。您可以添加该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>
— 它的发音
source
4
我希望音频在后台播放。
— Akshay Rathod '18
13
静音的音频自动播放不能视为答案。
— mayyiam
@Akshay Rathod您找到解决方案了吗？
— 死者
0

不使用iframe或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>
展开摘要

— 胡安
source
1
不。在Chrome版本85.0.4183.83（官方内部版本）（64位）中不起作用
— MC9000，2000年
-1

视频标签也可以播放音频。鉴于音频标签似乎没有应有的行为，您可以将视频标签用于音频：

<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>
— 坎贝尔
source
-2

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

— 马丁·范·胡特
source
它显示控件，我不希望页面上有任何内容。只需播放和暂停按钮即可。
— Akshay Rathod '18
以及如何循环播放音频？
— Akshay Rathod '18年
1
@AkshayRathod请检查HTML <audio>循环属性。而在XHTML中，禁止属性最小化，并且必须将loop属性定义为<audio loop =“ loop”>。
— hmd
-4

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

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

这对我有用。

— Mahtab Alam
source
3
并不是说自动播放“不起作用”，而是受制于一项政策，即如果不满足策略要求，则自动播放将不起作用。请参阅developers.google.com/web/updates/2017/09/…。此代码不会绕开该政策。如果它对您有用，那是因为您达到了阈值和/或设置了一些开发人员标志。但是正如该页面所述，您不能假设它对所有人都适用。
— ADyson
至少在FF 66中，这也不起作用。新策略是阻止play（）并非由用户交互触发。
— 兰迪（Randy）
是@Randy，如果我们尝试在JS中播放声音而不进行交互，则Web浏览器控制台中的错误消息是：“错误：未捕获（承诺）DOMException：play（）失败，因为用户未与首先记录。”
— Wild8x
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.