jQuery .on('ended')无法在移动设备上工作
问题描述:
我面临iOS移动Safari中事件处理程序的问题。jQuery .on('ended')无法在移动设备上工作
我有一个按钮绑定在点击播放一系列不同的声音文件。
该代码在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>
答
我想通了这个问题与此代码。
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();
}
})});
工作作为目前打算。