Аудиоплеер ISO12 HTML5 автоматически воспроизводит следующую песню в фоновом режиме

Question

Я создал веб-аудиоплеер, но когда я открыл его в 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);

автоматически палить следующую песнюработает в веб-браузере на ПК ，, но не работает в iPhone, что мне делать?