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(); 
    } 
})}); 

工作作爲目前打算。