我创建了一个网络音频播放器，但是当我在iPhone Safari中打开它并在后台打开它时，它不会自动播放下一首歌曲。我不知道如何解决这个问题。
这是我的HTML代码：
<div id="player">
<div class="cover"></div>
<div class="ctrl">
<div class="tag">
<strong>Title</strong>
<span class="artist">Artist</span>
<span class="album">Album</span>
</div>
<div class="control">
<div class="left">
<div class="rewind icon margin-right"></div>
<div class="playback icon margin-right margin-left"></div>
<div class="fastforward icon margin-left"></div>
</div>
<div class="volume right">
<div class="mute icon left margin-right"></div>
<div class="slider left">
<div class="pace"></div>
</div>
</div>
</div>
<div class="progress">
<div class="slider">
<div class="loaded"></div>
<div class="pace"></div>
</div>
<div class="timer left">0:00</div>
<div class="line left">/</div>
<div class="total_timer left">0:00</div>
<div class="right margin-top">
<div class="repeat icon margin-right"></div>
<div class="shuffle icon margin-right margin-left"></div>
<div class="list icon margin-left"></div>
</div>
</div>
</div>
</div>
<ul id="" class="playlist"></ul>
这是我的JS代码：
(function ($) {
// Settings
var repeat = localStorage.repeat || 0,
shuffle = localStorage.shuffle || 'false',
continous = true,
autoplay = true,
listDisplay = true,
isclick = true,
playlist = [
{% for data in allData %}
{
title: '{{ data[0] }}',
artist: '{{ data[1] }}',
album: '{{ data[4] }}',
cover: '/image/{{ data[3] }}.jpg',
mp3: '/music/{{ data[2] }}.mp3',
ogg: ''
},
{% endfor %}
];
// Load playlist
for (var i = 1; i <= playlist.length; i++) {
var item = playlist[i - 1];
$('.playlist').append('<li>' + i + '. ' + item.title + '</li>');
}
var time = new Date(),
currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,
trigger = false,
audio, timeout, isPlaying, playCounts;
var play = function () {
//audio.load();
audio.play();
$('.playback').addClass('playing');
timeout = setInterval(updateProgress, 500);
isPlaying = true;
var totalTime = parseInt(audio.duration % 60) < 10 ? '0' + parseInt(audio.duration % 60) : parseInt(audio.duration % 60);
$('.total_timer').html(parseInt(audio.duration / 60) + ':' + totalTime);
}
var pause = function () {
audio.pause();
$('.playback').removeClass('playing');
clearInterval(updateProgress);
isPlaying = false;
}
// Update progress
var setProgress = function (value) {
var currentSec = parseInt(value % 60) < 10 ? '0' + parseInt(value % 60) : parseInt(value % 60),
ratio = value / audio.duration * 100;
$('.timer').html(parseInt(value / 60) + ':' + currentSec);
$('.progress .pace').css('width', ratio + '%');
$('.progress .slider a').css('left', ratio + '%');
}
var updateProgress = function () {
setProgress(audio.currentTime);
}
// Progress slider
$('.progress .slider').slider({
step: 0.1, slide: function (event, ui) {
$(this).addClass('enable');
setProgress(audio.duration * ui.value / 100);
clearInterval(timeout);
}, stop: function (event, ui) {
audio.currentTime = audio.duration * ui.value / 100;
$(this).removeClass('enable');
timeout = setInterval(updateProgress, 500);
}
});
// Volume slider
var setVolume = function (value) {
audio.volume = localStorage.volume = value;
$('.volume .pace').css('width', value * 100 + '%');
$('.volume .slider a').css('left', value * 100 + '%');
}
var volume = localStorage.volume || 0.5;
$('.volume .slider').slider({
max: 1, min: 0, step: 0.01, value: volume, slide: function (event, ui) {
setVolume(ui.value);
$(this).addClass('enable');
$('.mute').removeClass('enable');
}, stop: function () {
$(this).removeClass('enable');
}
}).children('.pace').css('width', volume * 100 + '%');
$('.mute').click(function () {
if ($(this).hasClass('enable')) {
setVolume($(this).data('volume'));
$(this).removeClass('enable');
} else {
$(this).data('volume', audio.volume).addClass('enable');
setVolume(0);
}
});
// Switch track
var switchTrack = function (i) {
if (i < 0) {
var track = currentTrack = playlist.length - 1;
} else if (i >= playlist.length) {
track = currentTrack = 0;
} else {
track = i;
currentTrack = i
}
$('audio').remove();
loadMusic(track);
if (isPlaying == true) play();
}
// Shuffle
var shufflePlay = function () {
var time = new Date(),
lastTrack = currentTrack;
currentTrack = time.getTime() % playlist.length;
if (lastTrack == currentTrack) ++currentTrack;
switchTrack(currentTrack);
}
// Fire when track ended
var ended = function () {
pause();
audio.currentTime = 0;
playCounts++;
if (continous == true) isPlaying = true;
if (repeat == 1) {
play();
} else {
if (shuffle === 'true') {
shufflePlay();
} else {
if (repeat == 2) {
switchTrack(++currentTrack);
} else {
if (currentTrack < playlist.length) switchTrack(++currentTrack);
}
}
}
}
var beforeLoad = function () {
var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
$('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) + '%');
}
// Fire when track loaded completely
var afterLoad = function () {
if (autoplay == true) play();
}
// Load track
var loadMusic = function (i) {
var item = playlist[i],
newaudio = $('<audio autoplay preload="auto" id="audio">').html('<source src="' + item.mp3 + '"><source src="' + item.ogg + '">').appendTo('#player');
nowcover = $('.background').css("background-image").replace('url(', '').replace(')', '').replace('\"', '').replace('\"', '');
$('.cover').html('<img src="' + item.cover + '" alt="' + item.album + '">');
$('.tag').html('<strong>' + item.title + '</strong><span class="artist">' + item.artist + '</span><span class="album">' + item.album + '</span>');
$('.playlist li').removeClass('playing').eq(i).addClass('playing');
if (nowcover == item.cover) {
} else {
if (isclick) {
isclick = false;
$('.background').fadeOut(0, function () {
$(this).css('background-image', 'url(' + item.cover + ')')
}).fadeIn(1500);
setTimeout(function () {
isclick = true;
}, 1000);
}
}
audio = newaudio[0];
audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
audio.addEventListener('progress', beforeLoad, false);
audio.addEventListener('durationchange', beforeLoad, false);
audio.addEventListener('canplay', afterLoad, false);
audio.addEventListener('ended', ended, false);
};
loadMusic(currentTrack);
$('.playback').on('click', function () {
if ($(this).hasClass('playing')) {
pause();
} else {
play();
}
});
$('.rewind').on('click', function () {
if (shuffle === 'true') {
shufflePlay();
} else {
switchTrack(--currentTrack);
}
});
$('.fastforward').on('click', function () {
if (shuffle === 'true') {
shufflePlay();
} else {
switchTrack(++currentTrack);
}
});
$('.playlist li').each(function (i) {
var _i = i;
$(this).on('click', function () {
switchTrack(_i);
});
});
if (shuffle === 'true') $('.shuffle').addClass('enable');
if (repeat == 1) {
$('.repeat').addClass('once');
} else if (repeat == 2) {
$('.repeat').addClass('all');
}
$('.repeat').on('click', function () {
if ($(this).hasClass('once')) {
repeat = localStorage.repeat = 2;
$(this).removeClass('once').addClass('all');
} else if ($(this).hasClass('all')) {
repeat = localStorage.repeat = 0;
$(this).removeClass('all');
} else {
repeat = localStorage.repeat = 1;
$(this).addClass('once');
}
});
$('.shuffle').on('click', function () {
if ($(this).hasClass('enable')) {
shuffle = localStorage.shuffle = 'false';
$(this).removeClass('enable');
} else {
shuffle = localStorage.shuffle = 'true';
$(this).addClass('enable');
}
});
$('.list').on('click', function () {
if ($('.playlist').hasClass('display-none')) {
$(this).addClass('enable');
$('.playlist').removeClass('display-none');
} else {
$(this).removeClass('enable');
$('.playlist').addClass('display-none');
}
});
$(document).keydown(function (event) {
var e = event;
if (e.keyCode == 13) {
setTimeout(function () {
$('.btn').click()
}, 0);
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
});
$('.btn').click(function () {
var filter_word = $('.search').val().trim();
if (filter_word) {
window.location.href = '/?filter_word=' + filter_word;
}
});
})(jQuery);
自动播放下一首歌曲在PC Web浏览器中有效，但在iPhone中不起作用，该怎么办？