在JavaScript中使用波形构建自定义音频播放器

最新推荐文章于 2024-07-03 11:30:00 发布

寒冰屋

最新推荐文章于 2024-07-03 11:30:00 发布

阅读量1.2k

点赞数 1

分类专栏： web前端文章标签： javascript 音视频 CanvasJS

原文链接：https://www.codeproject.com/Tips/5338983/Build-Custom-Audio-Player-with-Waveform-in-JavaScr

版权

web前端专栏收录该内容

230 篇文章 4 订阅

订阅专栏

介绍

如果您正在某个需要向用户播放一些音频的平台工作，例如，出售一些音频文件，那么展示其波形非常棒，这样用户就会对音频的结构和您的平台可以做什么印象深刻。您可以使用 Web音频API 在JavaScript中构建一个简单的音频播放器应用程序。API允许您从音频文件中提取频率、波形和其他数据。提取的数据可用于通过生成波进行可视化。当您处理音频波形生成的大数据时，绘制波形更平滑、更快而网页中没有任何延迟非常重要。作为开发人员，无论页面中的内容负载如何，我都更喜欢保持页面速度更快。如果我们尝试在页面中绘制波形，则必须牢记性能并构建一些简单的库来实现它。相反，我使用 CanvasJS图表来可视化可以在几毫秒内绘制数百万个数据点的波形。

底层技术是使用Web Audio API和CanvasJS在JavaScript中构建的。但是，它适用于Angular，React或任何其他JavaScript框架。

分步说明

要播放或可视化音频的波形，音频文件是必需的。让我们添加一个输入字段，允许用户从他们的机器浏览MP3文件。为了简单起见，我将其限制为允许用户仅浏览MP3文件。但是，Web音频API支持WAV，MP3，AAC，OGG和其他格式。

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

读取音频文件

在Web音频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音频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音频API可以选择通过调用 stop()方法来停止source。

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 以获取实时代码。