jQuery .on('ended') 无法在移动设备上运行

Question

我在 iOS 移动 Safari 中遇到事件处理程序问题。

我有一个按钮，点击后可以播放一系列不同的声音文件。

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

我感觉移动版 Safari 在音频播放完毕后不会触发“结束”事件触发器。有人对这个有经验么？有什么建议吗？

同样，它在除 iOS 移动版 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]);
				if ( i != pinyincount - 1 ){
					$( myaudio[i] ).on('ended', function(){;
						next = next + 1;
						myaudio[next].play();
					})
				};
			}
			myaudio[0].play();
			setTimeout(function(){
				$('.disabled-audio').toggle();
				$('.audio-button').toggle();
			}, 2300);
		} else {
			var myaudio = new Audio( pinyinlinks );
			myaudio.play();
		}
	} )
});

<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">
	    Read Word
	</span>
</span>
<span class="disabled-audio" style="display: none;">
	<span class="fa-stack fa-lg text-dk-gray" data-toggle="tooltip" data-placement="right" title="Read Word">
      Read Word
	</span>
</span>

Answer 1

我发现了这段代码的问题。

Safari Mobile 在我将事件处理程序附加到创建音频元素的同一个 for 循环中时遇到了问题。事件处理程序正在触发一个播放尚不存在的音频元素的函数。对于大多数浏览器来说，这并没有造成问题，但我认为这会导致 Safari 出现问题，因为 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();
    }
} )});

现在按预期工作。