嘿我在iOS上没有在我的移动网站上启动音频时遇到问题。
我了解iOS需要用户点击'为了启动HTML5 - Audio&视频,因此我将jPlayer设置为在用户点击“播放”...
后启动$(document).ready(function () {
var AudioPlayer = null; //null on initial page load (init it on click);
function initPlayer() {
AudioPlayer = {
mySlider: $("#slider").slider(),
currentTime: 0,
duration: 0,
my_jPlayer: $('#jquery_jplayer').jPlayer({
swfPath: "js",
cssSelectorAncestor: "#jp_container",
supplied: "mp3",
wmode: "window",
ready: function () {
console.log('ready');
$(this).jPlayer("setMedia", {
mp3: audioFile
});
},
//preload: 'auto'
}),
init: function () {
// Change the time format
$.jPlayer.timeFormat.padMin = false;
$.jPlayer.timeFormat.padSec = true;
$.jPlayer.timeFormat.sepMin = ":";
$.jPlayer.timeFormat.sepSec = "";
},
bindEvent: function () {
var self = this;
this.my_jPlayer.bind($.jPlayer.event.timeupdate, function (event) {
$.mobile.loading('hide');
self.currentTime = $('#jquery_jplayer').data('jPlayer').status.currentTime;
self.duration = $('#jquery_jplayer').data('jPlayer').status.duration;
if ($.jPlayer.convertTime(self.duration) != '0:00') {
$('#currentTimeDiv').html($.jPlayer.convertTime(self.currentTime));
$('#durationDiv').html($.jPlayer.convertTime(self.duration));
if ($('#slider').attr('max') != parseInt(self.duration)) {
$('#slider').attr('max', parseInt(self.duration));
//$slide.slider('max', parseInt(duration));
}
if (self.currentTime > 0) {
$("#slider").val(parseInt(self.currentTime));
//this.mySlider.slider('refresh');
}
//$slide.slider("value",$slide.slider("value")).slider('refresh');
} else {
$('#currentTimeDiv').html('0:00');
$('#durationDiv').html('0:00');
}
});
this.my_jPlayer.bind($.jPlayer.event.play,function (event) {
//$.mobile.loading('hide'); //only hide this on time update.
console.log('played');
});
this.my_jPlayer.bind($.jPlayer.event.stalled,function (event) {
$.mobile.loading('show');
console.log('stalled');
});
},
startAudioTrack: function () {
var trackClass = $("#track1").attr('class');
console.log(trackClass);
if ((typeof trackClass === "undefined") || (trackClass == 'jp-play')) {
this.my_jPlayer.jPlayer("play", parseInt(this.currentTime));
this.ready2Pause();
} else {
this.ready2Play();
this.my_jPlayer.jPlayer("pause", parseInt(this.currentTime));
}
return false;
},
ready2Play: function () {
//$("#track1").text('Play');
$('#track1').removeClass('jp-pause');
$('#track1').addClass('jp-play');
},
ready2Pause: function () {
//$("#track1").text('Pause');
$('#track1').removeClass('jp-play');
$('#track1').addClass('jp-pause');
}
} //audioPlayer
//start the audio player
AudioPlayer.init();
AudioPlayer.bindEvent();
setTimeout(function() { AudioPlayer.my_jPlayer.jPlayer("play"); }, 5000);
AudioPlayer.ready2Pause();
} //initPlayer;
$(document).on("click touchstart", "#play-overlay a.bt", function () {
initPlayer(); //create the player (and play)
togglePlayOverlay(0); //hide the play button overlay
});
});
代码有一个startAudioTrack函数。出于某种原因,当播放器已经初始化(第一次点击后)后,我可以点击第二个触发器,然后开始播放。此代码在普通的Web浏览器中工作,而不是在safari mobile上。
音频文件是ajax调用后设置的变量。