【前端】使用Web Audio API 技术播放音乐

简言

记录下使用web audio播放音乐的方法。

Web Audio API

Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果（如平移），等等。

你可以先看下api接口介绍文章Web Audio
API接口介绍。

html 的 <audio>已经可以播放音乐了，为什么要使用web auido api来实现一下呢？

Web Audio API 使用户可以在音频上下文（AudioContext）中进行音频添加特效、音频可视化和音频输出播放等操作，很显然，比用html5的audio元素要自由度高，对音频的操作也更全，可以很好的实现自定义化的操作。

web audio api 使用

一个简单而典型的 web audio 流程如下：

创建音频上下文在音频上下文里创建源 — 例如 <audio>, 振荡器，流创建效果节点，例如混响、双二阶滤波器、平移、压缩为音频选择一个目的地，例如你的系统扬声器连接源到效果器，对目的地进行效果输出

第三步和第5步就是对音频的操作，也可以不操作。

播放音乐

预览：

创建AudioContext上下文

var AudioContext = window.AudioContext || window.webkitAudioContext;var audioCtx = new AudioContext();

获取源

Web Audio API 获取音频源有多种方式 ：

二进制音频数据,格式是AudioBuffer 接口的格式。HTML5 <audio>或<video>元素生成的音频源,是AudioBufferSourceNode接口。WebRTC MediaStream 流生成的音频源，是
MediaStreamAudioSourceNode接口。

示例：
我们是播放音乐，获取的是一个url mp3链接，所以我们用第二种方式。
音频url

const audio = new Audio(props.audioObject.url);    audio.crossOrigin = 'anonymous';    //连接源    source = AudioCtx.createMediaElementSource(audio);

代码使用Audio() 构造器创建并返回一个 HTMLAudioElement，为避免出现CORS，要将crossOrigin属性值设为anonymous，否则可能无法播放（网页会阻止你的播放行为）。

音频操作

音频操作就是MDN audio API的那几个接口，例如：ConvolverNode、GainNode、AnalyserNode、ChannelMergerNode等。
每个接口的用法不同，具体接口使用方法请参考mdn。

改变音量

GainNode 接口用于音量变化。它是一个 AudioNode 类型的音频处理模块，输入后应用增益 效果，然后输出。
增益是一个无单位的值，会对所有输入声道的音频进行相应的增加（相乘）。如果进行了修改，则会立即应用新增益，从而在结果音频中产生奇怪的“咔嗒”声。为了防止这种情况发生，请不要直接更改值，而应在 AudioParam 接口上使用指数插值方法。
示例：

    gainNode = AudioCtx.createGain();     //  音量直接修改    gainNode.gain.value = volume.value / 100;//audioParam修改gainNode.gain.setValueAtTime(0.5, AudioCtx.currentTime);

音频可视化

AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 AudioNode，同时允许你获取和处理它生成的数据，从而创建音频可视化。
AnalyzerNode 只有一个输入和输出，即使未连接到输出它也能正常工作。

示例参考：音频可视化、MDN。

这个需要页面获取焦点

音频输出

音频最终要输出到扬声器上，否则会播放失败。
示例:
gainNode是一个AudioNode（音频节点），其他的音频接点也可以输出。

   gainNode.connect(AudioCtx.destination);

连接好后，我们要添加播放逻辑，首先创建播放按钮，然后监听点击事件，在事件触发音频源的播放方法。
这里的音频源是一个HTMLAudioElement，他有play()播放方法和pause()暂停方法。

//播放    source.mediaElement.play();    //暂停    source.mediaElement.pause();

效果

网页顶部切换栏上面出现声音小图标，说明声音输出成功。

结语

音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。一般来说，这个链或网起始于一个或多个音频源。这些节点的输出可以连接到其他节点的输入上，然后新节点可以对接收到的采样数据再进行其他的处理，再形成一个结果流。最后节点流再输出。

音频节点就是 AnalyserNode、GainNode 、AudioContext 对象等。

本文链接：https://www.kjpai.cn/news/2024-04-24/161862.html，文章来源：网络cs，作者：峨乐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！