一次在 Safari 上播放多个音频文件

Posted 2023-02-23

【中文标题】一次在 Safari 上播放多个音频文件

【英文标题】：Play multiple Audio files on Safari at once

【发布时间】：2017-11-09 14:14:17

【问题描述】：

我想在 ios 上同时播放多个音频文件。

点击一个按钮，我创建了一个音频文件的多个实例并将它们放入一个数组中。

let audio = new Audio('path.wav')
audio.play().then(() => 
   audio.pause();
   possibleAudiosToPlay.push(audio);
);

过了一会儿，我把它们都玩了：

possibleAudiosToPlay.forEach(el => 
    el.currentTime = 0;
    el.play();
);

在播放所有音频文件时：当一个新文件开始播放时，它会停止旧文件。 （在 iOS 上）

Apples 开发者指南说 html5 音频根本不可能：

也不支持同时播放多个音频流。

但这可以通过 Web Audio API 实现吗？ Apples 开发人员指南中没有任何关于它的内容。

【参考方案1】：

是的，您可以使用Web Audio API。您必须为每个音频源创建一个AudioBufferSourceNode，因为每个源只能播放一次（您不能停止它并再次播放）。

const AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();
const audioPaths = [
    "path/to/audio_file1.wav",
    "path/to/audio_file2.wav",
    "path/to/audio_file3.wav"
];
let promises = [];


// utility function to load an audio file and resolve it as a decoded audio buffer
function getBuffer(url, audioCtx) 
    return new Promise((resolve, reject) => 
        if (!url) 
            reject("Missing url!");
            return;
        

        if (!audioCtx) 
            reject("Missing audio context!");
            return;
        

        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";

        xhr.onload = function() 
            let arrayBuffer = xhr.response;
            audioCtx.decodeAudioData(arrayBuffer, decodedBuffer => 
                resolve(decodedBuffer);
            );
        ;

        xhr.onerror = function() 
            reject("An error occurred.");
        ;

        xhr.send();
    );



audioPaths.forEach(p => 
    promises.push(getBuffer(p, ctx));
);


// Once all your sounds are loaded, create an AudioBufferSource for each one and start sound
Promise.all(promises).then(buffers => 
    buffers.forEach(b => 
        let source = ctx.createBufferSource();
        source.buffer = b;
        source.connect(ctx.destination);
        source.start();
    )
);