音频输入和输出

一个图至少由两个节点组成，这里我们从最简单的场景着手，也就是输入节点直接连接到输出。

音频上下文

const audioCtx = new AudioContext();
const audioEl = new Audio();
const audioSourceNode = audioCtx.createMediaElementSource(audioEl);
const audioDestNode = audioCtx.destination;
audioSourceNode.connect(audioDestNode);

做个测试

将两个不同音频上下文的节点相连会怎样 ?

let audioCtx = new AudioContext();
let audioCtx2 = new AudioContext();
// ...
const audioDestNode2 = audioCtx2.destination;
audioSourceNode.connect(audioDestNode2);

会提示如下内容

cannot connect to an AudioNode belonging to a different audio context

音频源

媒体元素

MediaElementAudioSourceNode 媒体元素音频源接口，代表来自 HTML 媒体元素 <audio>，<video> 的音频源

const $audio = new Audio();
const audioSourceNode = audioCtx.createMediaElementSource($audio);

振荡器

OscillatorNode 振荡器接口，用于产生波形(发生器)

OscillatorNode() 构造函数创建一个新对象，该对象表示周期性波形，如正弦波，可选择设置节点的属性值以匹配指定对象中的值

const oscillatorNode = new OscillatorNode(audioCtx, options);

options

• type 节点产生的波的形状，默认为sine。可选值：sine square sawtooth triangle custom
• frequency 周期性波形的频率，单位是Hz。 默认值是 440.

媒体流

MediaStreamAudioSourceNode 媒体流音频源接口，表示来自 MediaStream 的音频源，比如 WebRTC，本地麦克风。

音频缓冲

AudioBuffer 代表一段音频数据

可以通过 AudioContext.decodeAudioData()方法从音频文件创建

AudioBufferSourceNode 音频缓存源接口，表示一段音频数据组成的音频源

AudioBufferSourceNode 接口继承自 AudioScheduledSourceNode，表现为一个音频源，它包含了一些写在内存中的音频数据，通常储存在一个 ArrayBuffer 对象中。

async function loadSound(audioCtx, url) {
  const response = await fetch(url);
  // Turn into an array buffer of raw binary data
  const buffer = await response.arrayBuffer();
  // Decode the entire binary MP3 into an AudioBuffer
  const audioBuffer = await audioCtx.decodeAudioData(buffer);

  return audioBuffer;
}
async function init() {
  const audioBuffer = await loadSound("https://...");
  await audioContext.resume();
  const source = audioContext.createBufferSource();
  // Assign the loaded buffer
  source.buffer = audioBuffer;
  // Connect to destination
  source.connect(audioContext.destination);
  // play
  source.start(0);
}