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

Question

我无法让音频标签在iOS的safari上播放任何内容。我正在尝试使用音频标签简单地播放文件。以下代码适用于Safari for Mac以及chrome for android。我知道iOS中的'带宽保护'需要用户交互来启动下载，但我已经通过从点击交互回调中调用以下代码来克服这个问题。 $("#mySpinner")是spin.js（http://fgnass.github.io/spin.js/）图书馆的一个实例

this.audioElement = $('#myAudio');
this.audioElement.empty();

var currentTrack = // .. get the track from backbone model
.......
var source = $('<source></source>', {
    type: 'audio/mpeg',
    src: currentTrack.get('url'),
}).appendTo(this.audioElement);

this.audioElement.appendTo('#container');
console.log("Added the new track to the audio tag");

// $("#myAudio")[0].load();
$("#myAudio").on('canplay', function() {
    $("#myAudio")[0].play();
    $("#mySpinner").hide();
}); 

我自己关心的是canplay回调;旋转器在chrome中消失但在Safari for iOS上永远不会消失，这让我相信canplay可能是相关的。但是，根据https://developer.apple.com/documentation/webkitjs/htmlmediaelement的说法，这个回调是受支持的。

Answer 1

问题是竞争条件。我的解决方案是从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();
        },

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

Answer 2

在iOS中，canplay事件不受支持。你只需在加载后直接玩。