浏览器中用 WebAssembly 解码播放 MP3 音频：浅显易懂的指南

2023-08-07 20:46:45

用 WebAssembly 和 JavaScript 播放 MP3 音频，无需第三方库

简介

MP3 音频是一种流行的格式，广泛用于音乐播放、播客和有声读物等场景。但是，在浏览器中播放 MP3 音频通常需要依赖第三方库。本文将介绍如何使用 WebAssembly 和 JavaScript 在浏览器中播放 MP3 音频，而无需使用任何第三方库。

步骤

1. 获取 MP3 解码器

首先，我们需要一个 MP3 解码器来将 MP3 文件转换为 PCM 音频格式。本文推荐使用 mpg123 解码器，它体积小巧、易于使用。

2. 编译 MP3 解码器到 WebAssembly

接下来，我们需要一个工具将 MP3 解码器编译成 WebAssembly 格式。推荐使用 emscripten，它可以将 C/C++ 代码编译成可在浏览器中运行的 WebAssembly 代码。

3. 创建 HTML 文件

创建一个 HTML 文件来加载和运行 WebAssembly 模块。在这个 HTML 文件中，需要包含以下代码：

<script type="text/javascript">
// 加载 WebAssembly 模块
const wasmModule = await WebAssembly.compile(fetch("mpg123.wasm").then(res => res.arrayBuffer()));

// 实例化 WebAssembly 模块
const instance = await WebAssembly.instantiate(wasmModule);

// 创建 AudioContext
const audioContext = new AudioContext();

// 创建一个缓冲区来存储解码后的 PCM 音频数据
const buffer = new Float32Array(4096);

// 获取 WebAssembly 模块中的解码和播放函数
const decode = instance.exports.decode;
const play = instance.exports.play;

// 定义一个解码和播放函数
function decodeAndPlay(audioBuffer) {
  // 解码 MP3 音频数据
  decode(audioBuffer.getChannelData(0), buffer.length);

  // 播放 PCM 音频数据
  play(buffer);
}

// 获取 audio 元素
const audioElement = document.querySelector("audio");

// 在 audio 元素可以播放时触发解码和播放函数
audioElement.addEventListener("canplaythrough", () => {
  decodeAndPlay(audioContext.createBufferSource(audioElement));
});
</script>