html5 audio在IOS上播放MP3为何只能播放一次
在一个项目中遇到的问题,HTML5 audio播放MP3文件(只有几秒的提示音),在安卓上能正常播放,但在IOS上就只能播放一次,再点击就不会播放了。经测试可能是 currentTime的问题,
Player = function() {
"use strict";
function e(e, t) {
var n, r, i = !1,
o = "audio-player";
if (n = document.createElement("Audio"), n.className = o, n.style.display = "none", t) for (r in t) t.hasOwnProperty(r) && (n[r] = t[r]);
document.body.appendChild(n),
this.player = n,
this.player.src = e,
this.isplay = i
}
return e.prototype = {
volume: function(e) {
return e ? this.player.volume = e: this.player.volume
},
isPlaying: function() {
return this.isplay
},
play: function() {
this.isplay = !0,
this.player.play()
},
pause: function() {
this.isplay = !1,
this.player.pause()
},
toggle: function() {
this.isplay ? this.pause() : this.play()
},
time: function(e) {
return e ? this.player.currentTime = e: this.player.currentTime
},
setTime: function(){
this.player.currentTime = 0
},
totalTime: function() {
return this.player.duration
},
on: function(e, t) {
var n, r = this,
i = e.split(/\s+/),
o = function(e) {
r.player.ended && "pause" === e.type || t.apply(r, Array.prototype.slice.call(arguments))
};
for (n = 0; n < i.length; ++n) i[n] && this.player.addEventListener(i[n], o, !1)
}
},e
} ();
$(function() {
function e(e, t) {
e.forEach(function(e) {
// e !== t && (e.isPlaying() && e.pause(), e.append_player && e.append_player.isPlaying && e.append_player.pause())
e !== t && (e.isPlaying() && e.pause())
})
}
//if (0 === $(".main.thread").length) return ! 1;
var t = [];
$(".voice").each(function() {
var n, r = $(this),
i = r.data("src"),
// o = r.data("append-src"),
s = new Player(i, {
preload: "none"
});
t.push(s),
// o && (s.append_player = n = new Player(o, {
// n = new Player(o, {
// preload: "none"
// }), n.on("playing",
// function() {
// r.addClass("play")
// }), n.on("pause",
// function() {
// r.removeClass("play")
// }), n.on("ended",
// function() {
// r.removeClass("play"),
// s.in_append = !1
// }),
s.on("playing",
function() {
console.log('playing');
r.addClass("play")
}),
s.on("pause",
function() {
console.log('pause');
r.removeClass("play")
}),
s.on("ended",
function() {
console.log('end');
console.log(s.time());
s.pause();
// s.time(1);
s.setTime();
console.log(s.time());
console.log(s.isPlaying());
// s.append_player ? (s.append_player.play(), s.in_append = !0) : r.removeClass("play")
r.removeClass("play")
}),
r.on("click",
function() {
console.log('click play');
// s.isPlaying() || n && n.isPlaying() ? e(t, null) : (n && s.in_append ? n.play() : s.play(), e(t, s));
s.isPlaying() ? e(t, null) : (s.play(), e(t, s));
});
});
});
这样写在安卓上是可以的,但在IOS上currenttime不会被设置成0. 大家有什么解决方案不。谢谢!
web前端开发 html5 html5-audio JavaScript
十六夜月華
10 years, 2 months ago
Answers
网上找了说iOS上每次都新建audio对象,因此用了个办法临时解决了,但其实这种方式在iOS兼听不到playing、ended等事件。
r.on("click",
function() {
if(audioBro.isiPhone()){
// console.log('isPhone');
s = new Player(i, { // 每次新建 player对象
preload: "none"
});
}
s.isPlaying() ? e(t, null) : (s.play(), e(t, s));
});
宮小路瑞惠
answered 10 years, 2 months ago