简言
记录下使用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();
效果
网页顶部切换栏上面出现声音小图标，说明声音输出成功。
结语
音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。一般来说，这个链或网起始于一个或多个音频源。这些节点的输出可以连接到其他节点的输入上，然后新节点可以对接收到的采样数据再进行其他的处理，再形成一个结果流。最后节点流再输出。文章来源：https://www.toymoban.com/news/detail-857428.html
音频节点就是 AnalyserNode、GainNode 、AudioContext 对象等。文章来源地址https://www.toymoban.com/news/detail-857428.html
到了这里，关于【前端】使用Web Audio API 技术播放音乐的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
