我在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>
答案 0 :(得分:0)
我发现了这段代码的问题。
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();
}
} )});
现在按预期工作。