Web Audio API
是什么
Web Audio API 用于操作声音。让开发者能够在浏览器中轻松创建、处理和操作音频数据，从简单的音频播放到复杂的实时音频效果都不在话下。
核心模块
- AudioContext：音频处理的核心上下文，用来控制其所包含节点的创建和音频处理、解码。使用其他的接口前你必须创建一个音频上下文，一切操作都在这个环境里运行。
- AudioNode ：各种音频处理节点的基类，也就是音频处理模块，例如音频源（<audio>或<video>），音频输出、中间处理模块（例如：滤波器 BiquadFilterNode 或者音量控制器 GainNode）。
- AudioParam：用于控制音频参数的自动化。
- ended ：当媒体播放停止时，会触发
ended事件。
基本用法
浏览器原生提供AudioContext对象，该对象用于生成一个声音的上下文，与扬声器相连。
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();然后，获取音源文件，将其在内存中解码，就可以播放声音了。
// 传入一个音频的url
const response = await fetch(url);
// 这里arrayBuffer()将响应体获取为二进制数据
const audioData = await response.arrayBuffer()
// decodeAudioData() 将二进制音频数据解码为 AudioBuffer
audioBuffer.value = await audioContext.value.decodeAudioData(audioData)
// 创建音频源
sourceNode.value = audioContext.value.createBufferSource()
sourceNode.value.buffer = audioBuffer.value
sourceNode.value.connect(gainNode.value)//这个是用来连接扬声器的核心优势
- 精确的时间控制：可以精确到毫秒级的音频播放控制
- 多音频轨道：可以同时播放多个音频（讲解+背景音乐）
- 音频处理：可以实时调整音调、语速等
- 无缝衔接：实现音频段之间的平滑过渡
- 可视化：可以绘制音频波形图
Web Audio API 与 HTML5 Audio API 跨域问题
