【前端】使用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 对象等。

相关推荐
速盾cdn4 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水37 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web