jQuery .on（'ended'）无法在移动设备上工作

Question

我面临iOS移动Safari中事件处理程序的问题。

我有一个按钮绑定在点击播放一系列不同的声音文件。

该代码在Chrome，Firefox，IE和Safari上按预期工作。但是，在移动设备上，它只播放系列中的第一个声音。

我有一种感觉，当音频完成播放时，移动Safari不会触发“已结束”事件触发器。有人对这个有经验么？有什么建议么？

再说一遍，除了iOS移动版Safari之外，它在每个浏览器上按预期工作。

代码如下。

jQuery(document).ready(function($) { 
 
\t $('.audio-button').click(function(){ 
 
\t \t $('.audio-button').toggle(); 
 
\t \t $('.disabled-audio').toggle(); 
 
\t \t var pinyinlinks = $(this).attr('audio'); 
 
\t \t var pinyinsplit = pinyinlinks.split(','); 
 
\t \t pinyinsplit = pinyinsplit.map(function(el) { 
 
    \t \t \t return 'http://mandarin.cards/wp-content/themes/cards/audio/' + el; 
 
\t \t }); 
 
\t \t console.log(pinyinsplit); 
 
\t \t var pinyincount = pinyinsplit.length; 
 
\t \t if (pinyincount > 1){ 
 
\t \t \t var myaudio = []; 
 
\t \t \t var next = 0; 
 
\t \t \t for (var i = 0; i < pinyincount; i++) { 
 
\t \t \t \t myaudio[i] = new Audio(pinyinsplit[i]); 
 
\t \t \t \t if (i != pinyincount - 1){ 
 
\t \t \t \t \t $(myaudio[i]).on('ended', function(){; 
 
\t \t \t \t \t \t next = next + 1; 
 
\t \t \t \t \t \t myaudio[next].play(); 
 
\t \t \t \t \t }) 
 
\t \t \t \t }; 
 
\t \t \t } 
 
\t \t \t myaudio[0].play(); 
 
\t \t \t setTimeout(function(){ 
 
\t \t \t \t $('.disabled-audio').toggle(); 
 
\t \t \t \t $('.audio-button').toggle(); 
 
\t \t \t }, 2300); 
 
\t \t } else { 
 
\t \t \t var myaudio = new Audio(pinyinlinks); 
 
\t \t \t myaudio.play(); 
 
\t \t } 
 
\t }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span onClick="" class="audio-button" style="cursor: pointer;" audio="ni_3.mp3,hao_3.mp3"> 
 
<span class="fa-stack fa-lg text-yellow" data-toggle="tooltip" data-placement="right" title="Read Word"> 
 
\t  Read Word 
 
\t </span> 
 
</span> 
 
<span class="disabled-audio" style="display: none;"> 
 
\t <span class="fa-stack fa-lg text-dk-gray" data-toggle="tooltip" data-placement="right" title="Read Word"> 
 
     Read Word 
 
\t </span> 
 
</span>

Answer 1

我想通了这个问题与此代码。

Safari Mobile遇到了一个问题，就是我在创建音频元素的相同for循环中附加了事件处理程序。事件处理程序正在触发一个播放音频元素的函数，该元素尚不存在。它对大多数浏览器都没有问题，但我认为这导致了Safari的问题，可能有更严格的准则。

的解决方案是循环分解成两个独立的回路，一个创造了音频单元，以及一个附加的事件处理程序：

jQuery(document).ready(function($) { 
$('.audio-button').click(function(){ 
    $('.audio-button').toggle(); 
    $('.disabled-audio').toggle(); 
    var pinyinlinks = $(this).attr('audio'); 
    var pinyinsplit = pinyinlinks.split(','); 
    pinyinsplit = pinyinsplit.map(function(el) { 
     return 'http://mandarin.cards/wp-content/themes/cards/audio/' + el; 
    }); 
    console.log(pinyinsplit); 
    var pinyincount = pinyinsplit.length; 
    if (pinyincount > 1){ 
     var myaudio = []; 
     var next = 0; 
     for (var i = 0; i < pinyincount; i++) { 
      myaudio[i] = new Audio(pinyinsplit[i]); 
      myaudio[i].load(); 
     } 
     function playnext(element, index, array) { 
      $(element).on('ended', function(){; 
        next = next + 1; 
        myaudio[next].play(); 
       }) 
     }; 
     myaudio.forEach(playnext); 
     myaudio[0].play(); 
     setTimeout(function(){ 
      $('.disabled-audio').toggle(); 
      $('.audio-button').toggle(); 
     }, 2300); 
    } else { 
     var myaudio = new Audio(pinyinlinks); 
     myaudio.play(); 
    } 
})}); 

工作作为目前打算。