Web Audio API 初识 - Githubissues

进化史

Web Audio API 介绍

首先，了解一下什么是 Web Audio API，它是在 HTML5 中新增加的一个 API，但似乎大家对它的印象并不深，更多的是记住了它的其他兄弟（Web Storage API、Canvas API），Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频进行处理。

Web Audio API 不等于 <audio> 元素

因为它有非常丰富的 API

API 清单

那它到底能干什么？

对简单或复杂的音频进行混合
精确控制音频的密度和节奏
内置淡入/淡出，颗粒噪点，音频控制等效果
灵活的处理在音频流的声道，可拆分可合并
处理
使用 MediaStream 的 getUserMedia() 方法实时处理输入的音频，如：变声
立体音效，支持多种 3D 游戏和沉浸式环境
利用卷积引擎，创建各类线性音效，例如小/大房间、大教堂、音乐厅等，适用于创建高质量的房间效果
实时的时域和频分析，实现音频可视化
很多音频波形算法控制

通过钢琴例子来初步了解

88 个琴键（52 个白键、36 个黑键组成）

重点：声音是由硬件生成的，并不是用 mp3、wav 等格式播放出来的通过十几二十行的 JS 代码就能实现

实现的代码

1、兼容老的 webkit 浏览器

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

2、创建新的音频上下文接口

let audioCtx = new AudioContext();

3、创建一个 OscillatorNode 它表示一个周期性波形（振荡）（抽象表达形式）声音是由物体振动产生的，这里可以理解为创建一个音调

let oscillator = audioCtx.createOscillator();

4、创建一个 GainNode 控制音频的总音量

let gainNode = audioCtx.createGain();

5、将音调和音频关联起来

oscillator.connect(gainNode);

6、将音量和设备关联，一般情况下是扬声器

gainNode.connect(audioCtx.destination);

7、指定音调为正弦波类型 square 方波 | triangle 三角波 | sawtooth 锯齿波 setPeriodicWave() 方法自定义波形

oscillator.type = 'sine'; // 正弦波

8、设置当前播放声音的频率

oscillator.frequency.value = frequency;

9、currentTime 的值是双精度浮点型数字，返回硬件调用的秒数这个时间无法改变，从 new AudioContext 开始就会一直累加表示把当前的时间的音量设置为 0

gainNode.gain.setValueAtTime(0, audioCtx.currentTime);

10、linearRampToValueAtTime 表示某时间线性变化到某值表示当前时间 0.01 秒后，声音线性的从 0 增加到 1

gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);

11、开始播放音调

oscillator.start(audioCtx.currentTime);

12、exponentialRampToValueAtTime 表示音量在某个时间指数变化到某值这里表示在 1 秒内，音量由之前的 1 指数曲线的速度降至到 0.001 的音量

gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);

13、1 秒后完全停止音乐

oscillator.stop(audioCtx.currentTime + 1);

兼容性

iOS 支持性很好，微信下 X5 同样也不错，所以不用担心

Can I use

X5 Can I user

o2team / H5Skills

Web Audio API 初识 #64

Web Audio API 介绍

那它到底能干什么？

通过钢琴例子来初步了解

实现的代码

兼容性

Web 音频库推荐

参考资料