如何在 jquery 中使用音频标签自动播放音乐？

Posted 2023-02-25

【中文标题】如何在 jquery 中使用音频标签自动播放音乐？

【英文标题】：how to autoplay a music using audio tag in jquery?

【发布时间】：2018-05-28 12:05:24

【问题描述】：

我想在 jquery 中自动播放一个 mp3 文件

我使用了这个代码，

function musicStart() 
  pop = window.open('', 'back__music', 'width=100,height=100', true);
  pop.document.write('<audio controls autoplay loop><source 
  src="./music.mp3"/></audio>');

循环正在工作， 但自动播放不是。

当我将autoplay="true" 或autoplay="1" 或autoplay="autoplay" 添加到音频标签时，结果是一样的。

或者当我使用嵌入标签时，它不会重复播放音乐。

我不在乎使用音频标签或嵌入标签

我该怎么办？

【问题讨论】：

您可以尝试通过在加载时调用节点的播放方法来触发播放。

【参考方案1】：

$('audio')[0].play();（假设您的页面中只有一个audio）应该可以完成这项工作。

一个基本的例子：

$('audio')[0].play();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4'></audio>

【参考方案2】：

在 jQuery 中你可以这样实现：

$('.music').html('<audio controls autoplay> <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"  type="audio/mpeg"> </audio>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="music">

</div>

【参考方案3】：

我知道解决办法！

我是这样解决的，如果有和我一样有问题的，请关注我。

首先，在此处输入链接~chrome://flags/#autoplay-policy，并从默认检查到不需要用户手势

然后，像这样更改您的代码

function musicStart() 
    pop = window.open('', 'back__music', 'width=100,height=100', true);
    if (back__music.location.href === 'about:blank') 
        pop.document.write('<audio controls autoplay loop><source src="./music.mp3" type="audio/mp3"/></audio>');
    

希望与你同在:)