javascript - 如何使用 js-mp3 解码 MP3 并在 AudioContext 中播放？

Question

由于 Safari 15 中的错误有时会导致 AudioContext.decodeAudioData 对普通 MP3 文件失败(请参阅 Safari 15 fails to decode audio data that previous versions decoded without problems )，我正在尝试解决方法。解决方法是使用库解码文件 https://github.com/soundbus-technologies/js-mp3 ，然后根据该数据创建一个 AudioBuffer 并播放它。

问题是 js-mp3 返回一个带有 PCM 数据的 ArrayBuffer，而创建一个 AudioBuffer 需要两个单独的数组，每个 channel 一个，sampleRate 和 sample帧长度。到目前为止我得到的是:

function concatTypedArrays(a, b) { // a, b TypedArray of same type
    var c = new (a.constructor)(a.length + b.length);
    c.set(a, 0);
    c.set(b, a.length);
    return c;
};

// responseData is an ArrayBuffer with the MP3 file...
let decoder = Mp3.newDecoder(responseData);
let pcmArrayBuffer = decoder.decode();

//Trying to read the frames to get the two channels. Maybe get it correctly from
//the pcmArrayBuffer instead?
    
decoder.source.pos = 0;
let left = new Float32Array(), right = new Float32Array();
console.log('Frame count: ' + decoder.frameStarts.length);
let result;
let i = 0;
let samplesDecoded = 0;
                    
while (true) {

    let result = decoder.readFrame();
    if (result.err) {
        break;
    } else {
        console.log('READ FRAME ' + (++i));
        samplesDecoded += 1152; //Think this is the right sample count per frame for MPEG1 files
        left = concatTypedArrays(left, decoder.frame.v_vec[0]);
        right = concatTypedArrays(left, decoder.frame.v_vec[1]);
    }
}

let audioContext = new AudioContext();
let buffer = audioContext.createBuffer(2, samplesDecoded, decoder.sampleRate);
let source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start(0);

现在，这种方法起作用了，因为我确实听到了声音，我能听到它们是正确的声音，但它们被奇怪地扭曲了。我尝试播放的示例声音文件是 https://cardgames.io/mahjong/sounds/selecttile.mp3

知道这里出了什么问题吗？或者如何将从 .decode() 函数返回的单个 PCM 数组缓冲区正确转换为正确播放所需的格式？

Answer 1

fdcpp 的例子上面的链接表明，decoder.decode() 返回的ArrayBuffer 可用于将其写入 WAV 文件，无需任何进一步修改。这意味着数据必须是交错的 PCM 数据。

因此，它应该在将数据转换回浮点值时起作用。此外，它必须按照 Web Audio API 的预期放入平面阵列中。

const interleavedPcmData = new DataView(pcmArrayBuffer);
const numberOfChannels = decoder.frame.header.numberOfChannels();
const audioBuffer = new AudioBuffer({
    length: pcmArrayBuffer.byteLength / 2 / numberOfChannels,
    numberOfChannels,
    sampleRate: decoder.sampleRate
});
const planarChannelDatas = [];

for (let i = 0; i < numberOfChannels; i += 1) {
    planarChannelDatas.push(audioBuffer.getChannelData(i));
}

for (let i = 0; i < interleavedPcmData.byteLength; i += 2) {
    const channelNumber = i / 2 % numberOfChannels;
    const value = interleavedPcmData.getInt16(i, true);

    planarChannelDatas[channelNumber][Math.floor(i / 2 / numberOfChannels)]
        = value < 0
            ? value / 32768
            : value / 32767;
}