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

相关推荐
拉不动的猪20 分钟前
vue与react的简单问答
前端·javascript·面试
污斑兔32 分钟前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年41 分钟前
css之定位学习
前端·css·学习
旭久1 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶1 小时前
关于React Redux
前端
阿丽塔~1 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
冴羽2 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom2 小时前
Langflow:打造AI应用的强大工具
前端·面试·github
前端小张同学2 小时前
AI编程-cursor无限使用, 还有谁不会🎁🎁🎁??
前端·cursor
yanxy5122 小时前
【TS学习】(15)分布式条件特性
前端·学习·typescript