Jquery 使用HTML 5在Safari iOS中播放音频

我无法让音频标签在safari for iOS上播放任何内容。我只是想用音频标签播放一个文件。以下代码适用于Mac版Safari和android版chrome。我知道iOS中的“bandwidh守恒”要求用户交互来启动下载，但我已经克服了这一点，只通过单击交互回调调用以下代码$mySpinner是spin.js库的一个实例

---

我自己关心的是canplay回调；spinner在chrome中消失，但在iOS的Safari中从未消失，这让我相信canplay可能与此相关。但是，根据，支持此回调。

在iOS中，不支持canplay事件。您只需在加载后直接播放。

问题在于比赛条件。我的解决方案是从DOM中删除所有音频元素，然后使用onclick事件中的url重新填充

像这样：

        .........
        .........

        // This function modifies the audio tag in order to play the next track
        changeTrack: function() {                
            var currentTrackIndex = this.get('playlistCollection').currentIndex;
            var currentTrack = this.get('playlistTracksCollection').getTrackForIndex(currentTrackIndex - 1); // Indexes aren't 0 based for some reason.....

            // this.changeAudioTrack(currentTrack.get('url'));
            $("#mySpinner").show();
            this.changeAudioTrack(currentTrack.get('url'));
            CSAppConfig.globalAudio.on('canplay', function() {
                $("#mySpinner").hide();
            });
        },

        makeAudio: function() {
            // Create the audio element
            var audio = $('<audio></audio>', {
                id: 'myAudio',
            });
            audio.appendTo($('body'));
            return audio;
        },

        makeAndAppendSource: function(audio, url) {
            // Create the source element
            var source = $('<source></source>', {
                type: 'audio/mpeg',
                src: url
            });
            source.appendTo(audio);
        },

        changeAudioTrack: function(audioURL) {
            // Change the audio track
            CSAppConfig.globalAudio[0].pause();
            CSAppConfig.globalAudio.remove();
            CSAppConfig.globalAudio = this.makeAudio();
            this.makeAndAppendSource(CSAppConfig.globalAudio, audioURL);
            console.log('Calling play');
            CSAppConfig.globalAudio[0].play();
        },

        .........
        .........

我刚刚尝试了loadeddata，但也没用canplay不受支持的建议是不真实的；我设法将这个问题调试到一个竞争条件。我曾尝试关闭canplay上的微调器，它在运行iOS 8的iPhone 5S上运行

        .........
        .........

        // This function modifies the audio tag in order to play the next track
        changeTrack: function() {                
            var currentTrackIndex = this.get('playlistCollection').currentIndex;
            var currentTrack = this.get('playlistTracksCollection').getTrackForIndex(currentTrackIndex - 1); // Indexes aren't 0 based for some reason.....

            // this.changeAudioTrack(currentTrack.get('url'));
            $("#mySpinner").show();
            this.changeAudioTrack(currentTrack.get('url'));
            CSAppConfig.globalAudio.on('canplay', function() {
                $("#mySpinner").hide();
            });
        },

        makeAudio: function() {
            // Create the audio element
            var audio = $('<audio></audio>', {
                id: 'myAudio',
            });
            audio.appendTo($('body'));
            return audio;
        },

        makeAndAppendSource: function(audio, url) {
            // Create the source element
            var source = $('<source></source>', {
                type: 'audio/mpeg',
                src: url
            });
            source.appendTo(audio);
        },

        changeAudioTrack: function(audioURL) {
            // Change the audio track
            CSAppConfig.globalAudio[0].pause();
            CSAppConfig.globalAudio.remove();
            CSAppConfig.globalAudio = this.makeAudio();
            this.makeAndAppendSource(CSAppConfig.globalAudio, audioURL);
            console.log('Calling play');
            CSAppConfig.globalAudio[0].play();
        },

        .........
        .........