Question

我有以下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>

此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);

});

当我单击play时，将触发playAudio()函数。在playAudio()函数中，它将加载段落1的音频并播放，然后在音频结束时再次触发playAudio()以播放下一段落的音频，依此类推。这在桌面浏览器上可以完美运行，但在移动浏览器上则不能。无论我使用哪种移动浏览器，Safari，Chrome，Mozilla，都会发生相同的问题。

在移动设备上，仅播放第一个音频，而不会播放下一个音频。

我什至尝试在audio.play()之前添加警报，并且在移动设备上收到警报，但是音频无法播放。

我尝试在线搜索解决方案，但没有找到适合我的情况的解决方案。任何解决方案将不胜感激。

Answer 1

解决我的问题的方法很简单，但是花了很长时间才弄清楚。移动浏览器的问题在于，除非用户单击，否则它们不会自动播放音频。这不是桌面浏览器的问题。因此解决方案是首先创建一个虚拟元素：

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

然后创建一个不可见的音频元素：

<audio id="player"></audio>

然后为其创建一个变量：

var audio = $('#player')[0];

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

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

然后触发对dummyElement的点击：

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

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

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

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

其他人遇到的类似问题：

Audio is unable to play via javascript on some mobile browsers

playing audio on mobile browser throgh html audio tag

Why audio not playing on mobile browser

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

1 个答案: