jquery - jPlayer 未在 iOS click/touchstart 上启动

Question

嘿，我遇到了 iOS 无法在我的移动网站上启动音频的问题。

我了解 iOS 需要用户“单击”才能启动 HTML5 - 音频和视频，因此我将 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 函数。出于某种原因，当播放器已经初始化（第一次单击后）时，我可以单击第二个触发器，然后开始播放。此代码可在普通网络浏览器中运行，但不能在 safari mobile 上运行。

音频文件是 ajax 调用后设置的变量。