【前端】使用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 流程如下:

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

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

播放音乐

预览:

创建AudioContext上下文

javascript 复制代码
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

获取源

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

示例:

我们是播放音乐,获取的是一个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 只有一个输入和输出,即使未连接到输出它也能正常工作。

示例参考:音频可视化MDN

这个需要页面获取焦点

音频输出

音频最终要输出到扬声器上,否则会播放失败。

示例:

gainNode是一个AudioNode(音频节点),其他的音频接点也可以输出。

javascript 复制代码
   gainNode.connect(AudioCtx.destination);

连接好后,我们要添加播放逻辑,首先创建播放按钮,然后监听点击事件,在事件触发音频源的播放方法。

这里的音频源是一个HTMLAudioElement,他有play()播放方法和pause()暂停方法。

javascript 复制代码
	//	播放
    source.mediaElement.play();
    //	暂停
    source.mediaElement.pause();

效果


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

结语

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

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

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端