javascript - iOS Safari 一触后按顺序播放声音

Question

我正在对 iOS 版 safari 上播放音频进行一些研发。我知道以编程方式播放音频存在局限性，因为它必须通过用户启动的事件来完成。但我想知道我们是否可以启动一个播放列表。我希望能够在从初始按钮开始后遍历数组并一一播放声音。我的代码看起来像这样:

<button id="play-btn">Play sounds</button><br/>
    <input class="text-input" type="text" placeholder="text for a sound here" value="hello world"><br/>
    <input class="text-input" type="text" placeholder="text for a sound here" value="typing a sound"><br/>
    <input class="text-input" type="text" placeholder="text for a sound here" value="my name is kobby"><br/>
    <input class="text-input" type="text" placeholder="text for a sound here" value="whatup allisha"><br/>

我的 js 看起来像这样:

(函数(){

function createAudioFile(text){
    console.log('audio file create', this);
    var audioSrc = "http://vaas.acapela-group.com/Services/Streamer?req_voice=sharon22k&req_text="
        + text.split(' ').join('+') + "&cl_login=EVAL_VAAS&cl_app=EVAL_7285884&cl_pwd=h1j1endv";

    var audioFile = new Audio();
    audioFile.src = audioSrc;

    if(audioFile.canPlayType('audio/mp3')) console.log('can play mp3');
    if(audioFile.canPlayType('audio/ogg')) console.log('can play ogg');

    console.log(audioFile);

    return audioFile;
}

var btn = document.querySelector('#play-btn');
var inputs = Array.prototype.slice.call(document.querySelectorAll('.text-input'));

btn.addEventListener('click', function(){

    //keep this context obj through all new callbacks or function calls
    var ctx = this;
    console.log('initial click', this);

    var values = inputs.map(function(el, i){
        return el.value;
    });

    console.log(values);
    var currentAudioIndex = 0;
    function playAudio(){
        console.log('playing audio', this);
        var audioFile = createAudioFile.call(ctx,values[currentAudioIndex]);

        var events = ['loadstart', 'stalled', 'suspend', 'waiting', 'progress', 'error', 'abort'];
        for( var i = 0, len = events.length; i<len; i++ ){
            audioFile.addEventListener(events[i], function(evt){{
                console.log(events[i] + ' just fired');
            }}.bind(ctx));
        }

        audioFile.addEventListener('ended', function(){
            console.log('audio end',this);
            currentAudioIndex ++;
            audioFile = null;//for ram purposes
            if(currentAudioIndex < values.length) playAudio.call(ctx);

        }.bind(ctx), false);

        audioFile.load();
        audioFile.play();

    }

    playAudio.call(ctx);


}, false);

})();

这适用于 Chrome，它可以播放我正在使用的 Vaas 帐户中的所有 4 个声音。然而，它只在 iPad 上播放第一个声音。

我是否可以执行递归函数并仍然保留调用堆栈？我在与开始相同的上下文中传递，但这似乎还不够？对此的任何帮助都会很棒!

谢谢科比

Answer 1

这里最好的解决方案是使用 Web Audio API而不是 Audio 对象。 Web Audio API 被广泛使用，甚至可以在 iOS 6 中使用。这将允许您拥有一个常量 AudioContext，您可以在其上分层声音，如果您愿意，甚至可以同时播放多个声音。

一个“问题”是 iOS Safari 实现了较旧的 Web Audio API，因此它使用 AudioBufferSource.prototype.noteOn(ms) 和 noteOff(ms) 而不是start()和stop()；它足够简单，可以进行填充。

如果您想继续使用音频方法，请注意，中间会有一秒钟的沉默。另外，我建议在同一对象上重新分配 src 属性，而不是创建新属性，以解决此类问题。