上的jQuery.on('已结束'）无法在移动设备上工作

jQuery .on( 'ended' ) not working on mobile

本文关键字：移动 工作 结束 on jQuery 上的      更新时间：2024-05-03

我在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>

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

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

现在按计划工作。

相关文章：