使用 JavaScript 构建带有波形的自定义音频播放器

引言

如果您正在处理需要向用户播放音频的平台，例如销售音频文件，那么展示其波形会给人留下深刻印象，用户会对其音频结构和您的平台功能感到惊叹。您可以使用 Web Audio API 在 JavaScript 中构建一个简单的音频播放器应用程序。该 API 可以从音频文件中提取频率、波形和其他数据。提取的数据可用于通过生成波形来可视化。在处理音频波形生成的大量数据时，在网页上平滑、快速地绘制波形而不出现任何延迟至关重要。作为开发者，我倾向于保持页面速度，无论页面上有多少内容。如果我们尝试在页面上绘制波形，必须考虑性能并构建一个简单的库来实现它。相反，我使用 CanvasJS 图表来可视化波形，该图表可以在 几毫秒内绘制数百万个数据点。

底层技术是使用 Web Audio API 和 CanvasJS 在 JavaScript 中构建的。但是，它也可以与 Angular、React 或任何其他 JavaScript 框架配合使用。

分步说明

要播放或可视化音频的波形，需要音频文件。让我们添加一个输入字段，允许用户从他们的计算机浏览 MP3 文件。为了简单起见，我限制它只允许用户浏览 MP3 文件。然而，Web Audio API 支持 WAV、MP3、AAC、OGG 等格式。

<input type="file" class="file-input" id="mp3-input" accept="audio/mp3">

读取音频文件

在 Web Audio API 中，我们需要获取音频数据的 ArrayBuffer 并将其传递给 BufferSource 来获取音频。使用 AudioContext.decodeAudioData 方法可以获取声音的音频缓冲区。解码后的 AudioBuffer 会被重采样到 AudioContext 的采样率，然后传递给回调函数或 Promise。

let margin = 10,
        chunkSize = 500,
        height = chart.get("height"),
scaleFactor = (height - margin * 2) / 2;

audioContext = new AudioContext();

let buffer = await file.arrayBuffer(),
        audioBuffer = await audioContext.decodeAudioData(buffer),
        float32Array = audioBuffer.getChannelData(0);

let array = [], i = 0, length = float32Array.length;

while (i < length) {
    array.push(
        float32Array.slice(i, i += chunkSize).reduce(function (total, value) {
            return Math.max(total, Math.abs(value));
        })
    );
}

添加播放/暂停和停止按钮

让我们添加两个按钮，一个用于控制播放/暂停，另一个用于停止。通常，按钮中的图标/文本应显示用户可以执行的操作。当音频正在播放时，显示“暂停”文本/图标，当音频暂停时，显示“播放”文本/图标。您可以通过轻松地在播放和暂停状态之间切换来实现这一点。在 Web Audio API 中，您可以检查 音频上下文的状态，并根据当前状态恢复或挂起音频。

<button class="button" id="play-pause-btn" 
title="Play / Pause"><span class="pp-icon"></span></button>
<button class="button" id="stop-btn" 
title="Stop"><span class="stop-icon"></span></button>

if(audioContext.state === 'running') {
    audioContext.suspend().then(() => {
        playPauseBtn.classList.toggle('is-play');
    });
}
else if(audioContext.state === 'suspended') {
    audioContext.resume().then(() => {
        playPauseBtn.classList.toggle('is-play');
    });
}

停止音频非常简单。Web Audio API 提供了通过调用 stop() 方法来停止源的选项。

source.stop();

从音频数据生成数据点

CanvasJS 支持许多 图表类型，例如折线图、面积图、饼图、范围图、金融图表等，适用于不同的数据集和用例。在这种情况下，范围面积图非常适合，因为它看起来像音频波形。我们只需从音频文件中生成数据点，然后将其传递给图表。CanvasJS 会像魔法一样为您绘制波形图。

let dps = []
for (let index in array) {
    dps.push({ x: margin + Number(index), 
    y: [50 - array[index] * scaleFactor, 50 + array[index] * scaleFactor]});
}

chart.options.data[0].dataPoints = dps;
chart.render();

为波形添加音频播放效果

音频开始播放时，为已播放的区域在波形上着色是一个不错的选择。添加 条带线在图表中显示着色区域，并每隔几毫秒或 1 秒更新一次。一旦音频停止播放，就停止更新。

source.onended = () => {
    chart.axisX[0].stripLines[0].set("endValue", chart.axisX[0].get("maximum"));
    clearInterval(intervalId);
}
let intervalId = setInterval(() => {
    chart.axisX[0].stripLines[0].set
    ("endValue", audioContext.currentTime * 
    (chart.data[0].dataPoints.length / audioBuffer.duration));
}, 250);

太棒了！您已经使用 CanvasJS 范围面积图构建了一个自定义音频播放器，具有播放、暂停和停止选项以及音频波形。您还可以使用 柱状图、范围柱状图来以不同方式显示波形。您还可以使用简单的 CSS 属性自定义音频播放器的外观和感觉，并通过更改 CanvasJS 图表属性来匹配波形。

CanvasJS 图表生成的此波形可以与音频/视频播放器集成，使其对用户更具吸引力。该库提供了更多自定义选项来更改外观和感觉，这为您提供了更多灵活性，可以根据您的网站/播放器主题自定义图表的外观和感觉。在本教程中，我禁用了图表交互性，以便仅展示波形。然而，CanvasJS 支持 交互性，当您将鼠标悬停在图表上时，它会显示工具提示和高亮。请查看此 JSFiddle 以获取实时代码。

示例代码

关注点

您将了解使用 Web Audio API 和 CanvasJS API 进行操作的趣味性。就 CanvasJS 而言，您将学习并享受如何自定义颜色和动态更新图表，从而使波形对用户更具吸引力。

示例代码：JSFiddle

历史

• 2022 年 8 月 4 日：初始版本