简言
记录下使用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上下文
javascript
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
获取源
Web Audio API 获取音频源有多种方式 :
- 二进制音频数据,格式是AudioBuffer接口的格式。
- HTML5 <audio>或<video>元素生成的音频源,是AudioBufferSourceNode接口。
- WebRTC MediaStream 流生成的音频源,是
MediaStreamAudioSourceNode接口。
示例:
我们是播放音乐,获取的是一个url mp3链接,所以我们用第二种方式。
音频url
javascript
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 接口上使用指数插值方法 。
示例:
javascript
gainNode = AudioCtx.createGain();
// 音量直接修改
gainNode.gain.value = volume.value / 100;
// audioParam修改
gainNode.gain.setValueAtTime(0.5, AudioCtx.currentTime);
音频可视化
AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 AudioNode,同时允许你获取和处理它生成的数据,从而创建音频可视化。
AnalyzerNode 只有一个输入和输出,即使未连接到输出它也能正常工作。
这个需要页面获取焦点
音频输出
音频最终要输出到扬声器上,否则会播放失败。
示例:
gainNode是一个AudioNode(音频节点),其他的音频接点也可以输出。
javascript
gainNode.connect(AudioCtx.destination);
连接好后,我们要添加播放逻辑,首先创建播放按钮,然后监听点击事件,在事件触发音频源的播放方法。
这里的音频源是一个HTMLAudioElement,他有play()播放方法和pause()暂停方法。
javascript
// 播放
source.mediaElement.play();
// 暂停
source.mediaElement.pause();
效果
网页顶部切换栏上面出现声音小图标,说明声音输出成功。
结语
音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。一般来说,这个链或网起始于一个或多个音频源。这些节点的输出可以连接到其他节点的输入上,然后新节点可以对接收到的采样数据再进行其他的处理,再形成一个结果流。最后节点流再输出。
音频节点就是 AnalyserNode、GainNode 、AudioContext 对象等。