Javascript 在桌面浏览器上播放音频，但在移动浏览器上不播放

我有以下HTML代码：

<div class="paragraph" id="1">Paragraph 1</div>
<div class="paragraph" id="2">Paragraph 2</div>
<div class="paragraph" id="3">Paragraph 3</div>
<div class="paragraph" id="4">Paragraph 4</div>
<div class="paragraph" id="5">Paragraph 5</div>

<span id="play">play</span>

第1段
第2款
第3款
第4段
第5段
玩

下面是JavaScript代码：

function playAudio(totalParagraphs, currentParagraph) {

  var paragraph = $(".paragraph#"+currentParagraph);

  if(currentParagraph <= totalParagraphs) {

    paragraph.css('background', 'red');

    var audio = new Audio("audios/"+currentParagraph+".mp3");

    audio.play();

    audio.onended = () => {
      paragraph.css('background', 'white');
      playAudio(totalParagraphs, currentParagraph + 1);
    }

  }

}

$('#play').on('click', () => {

  let totalParagraphs = $('.paragraph').length, currentParagraph = 1;

  playAudio(totalParagraphs, currentParagraph);

});

功能播放音频（总计段落，当前段落）{
var段落=$（“.段落#”+当前段落）；
如果（当前段落）{
css段（“背景”、“白色”）；
播放音频（总段落，当前段落+1）；
}
}
}
$（“#播放”）。在（'单击'，（）=>{
让TotalPerpages=$（“.段落”）。长度，CurrentPerpages=1；
播放音频（总段落，当前段落）；
});

当我点击

play

时，

playAudio（）

函数被触发。在

playAudio（）

函数中，它加载段落1的音频并播放，然后在音频结束时，

playAudio（）

将再次启动以播放下一段的音频，以此类推。这在桌面浏览器上非常有效，但在移动浏览器上则不行。无论我使用什么移动浏览器，Safari、Chrome、Mozilla，都会出现同样的问题

在手机上，只播放第一个音频，不播放下一个。

我甚至尝试在

audio.play（）

之前添加警报，我在手机上收到警报，但音频无法播放

---

我试图在线搜索解决方案，但没有找到适合我的案例的有效解决方案。任何解决方案都将不胜感激。

我的问题的解决方案非常简单，但需要很长时间才能找到。移动浏览器的问题是，除非用户单击，否则它们不会自动播放音频。这不是桌面浏览器的问题s、 因此，解决方案是首先创建一个虚拟元素：

<span id="dummyElement"></span>

然后加载音频，但方式不同：

var audio_url = "audio.mp3";
audio.src = audio_url;

然后触发对DummeyElement的单击：

$("#dummyElement").trigger("click");

$('#dummyElement').on('click', () => {
  audio.play();
});

然后为该dummyElement创建on.click函数：

$("#dummyElement").trigger("click");

$('#dummyElement').on('click', () => {
  audio.play();
});

完成。现在动态生成的音频可以完美播放了

其他人也遇到过类似问题：

---

我重新创建了你的问题，它对我很有效。你甚至可以在手机上访问我的ngrok tunnel，看看它是否有效。@HimanshuPant当你在手机上尝试时，只会播放第一个音频，不会播放下一个。再试一次。嗨，我相信你的代码是有效的。试试这个。我为那些奇怪的播放曲目道歉。@HimanshuPant没有。同样的问题。你确定你在使用移动设备吗？你在使用哪种浏览器？你是否尝试过在CSS文件上使用

触摸动作：操纵

？你的结论是错误的。桌面和移动浏览器都会阻止自动播放媒体。此外，两者都不需要虚拟元素。你只需要用户交互事件来启动p铺设。这似乎无效。如果我们按照您的逻辑，最初的点击应该足以让浏览器信任它。您的答案中存在歧义。@Brad不，它们不是。您可以找到多个SO答案来说明确切的情况。移动浏览器在自动播放媒体时的行为非常不同。请尝试我的问题上的代码，然后重试你会明白我的意思。在我的例子中，用户只需点击一次，音频就会自动播放。这在桌面浏览器上有效，但在移动浏览器上不起作用，因此需要在每个自动播放循环上点击一个虚拟元素来模拟用户点击，以欺骗用户交互过的移动浏览器。我相信我的代码可以改进“但现在还没有其他的技巧了。@MarwanAnsari请链接到那些堆栈溢出的答案。如果他们说了你说的话，我也想去纠正他们。你读了一些不好的信息或解释不正确。@Brad”