Web Audio API 的多方面研究

一、Web Audio API安卓

在 Android 平台上，我们可以利用 Web Audio API 对音频做出实时处理。以下是一个范例：

let audioContext = new AudioContext();
let oscillator = audioContext.createOscillator();
oscillator.connect(audioContext.destination);
oscillator.start();

上例中，我们使用了 AudioContext 和 OscillatorNode 类 ，并将输出连接至 AudioContext 的默认目标（即称为扬声器）来使音频播放。

不同的平台可能有不同的支持程度，因此，我们需要了解各个平台的支持情况以针对性地开发。

二、Web Audio API教程分析音频频率

要更精确地控制音频，我们需要理解音频频率分析。以下是一个简单的例子：

let audioContext = new AudioContext();
let analyser = audioContext.createAnalyser();
let dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);

我们首先创建了一个 AnalyserNode ，然后使用它的 frequencyBinCount 属性来获取可分析的频率 bin 的数量。然后，我们创建了一个 Uint8Array 数组，用于存储分析的结果。

三、Web Audio API显示麦克风

下面这个简单的范例将显示连接到计算机上的麦克风。我们将创建一个 MediaStreamAudioSourceNode 并将其连接到输出：

let audioContext = new AudioContext();
navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
  let source = audioContext.createMediaStreamSource(stream);
  source.connect(audioContext.destination);
});

在这个例子中，我们使用了 navigator.mediaDevices.getUserMedia() 来获取用户设备上的麦克风。

四、Web Audio API提取音频频率

提取音频频率是我们在实时处理音频时常常需要的操作。以下是一段范例代码：

let audioContext = new AudioContext();
let source = audioContext.createMediaElementSource(audioElement);
let analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 2048; // 设置分析精度

在上例中，我们从 HTML5 audio 元素中获取一个 MediaElementSourceNode 并将其连接到一个 AnalyserNode 。我们可以通过设置 AnalyserNode 的 fftSize 属性来控制分析精度。

五、Web Audio API顺序播放音符

下面这段范例代码将演示如何以顺序播放音符。

let audioContext = new AudioContext();
let startOffset = 0;
let noteDuration = 0.5;
let tempo = 60; // bpm
let notes = [
  {note: 'C4', time: 0},
  {note: 'D4', time: 1},
  {note: 'E4', time: 2},
  {note: 'C4', time: 3}
];
notes.forEach(note => {
  let time = note.time * 60 / tempo;
  let osc = audioContext.createOscillator();
  osc.frequency.value = note2freq(note.note);
  osc.connect(audioContext.destination);
  osc.start(audioContext.currentTime + startOffset + time);
  osc.stop(audioContext.currentTime + startOffset + time + noteDuration);
});

在这个例子中，我们创建了一个简单的数组，其中包含了按顺序播放的音符的名称和时刻。通过在 for 循环中遍历所有音符，并使用 start() 和 stop() 方法来控制播放，我们可以顺序播放音符。

六、Web Audio API顺序制作音符JS

下面这个简单的范例将演示如何使用 JavaScript 顺序制作音符：

let audioContext = new AudioContext();
let start = audioContext.currentTime;
let tempo = 60;
let noteDuration = 0.5;
let notes = [
  { note: 'C4', duration: 1 },
  { note: 'D4', duration: 1.5 },
  { note: 'E4', duration: 2 },
  { note: 'C4', duration: 1 }
];
let oscillatorNode = audioCtx.createOscillator();
for (let i = 0; i < notes.length; i++) {
  oscillatorNode.type = 'sine';
  oscillatorNode.frequency.value = noteToFreq[note];
  oscillatorNode.start(start);
  oscillatorNode.stop(start + noteDuration * notes[i].duration);
  start += noteDuration * notes[i].duration * (60 / tempo);
}

与上一个例子类似，我们使用了一个数组来存储顺序的音符，并在 for 循环中使用 start() 和 stop() 方法来控制播放。然而，这个例子中的主要区别在于使用了 duration 属性来控制每个音符的持续时间。

七、Web Audio API几个振荡器做音源

下面这段代码可以用几个 oscillators 做出多音一起的音效。我们在其中添加了 randomize() 函数，以便更多样地生成不同的效果：

let audioContext = new AudioContext();
let startOffset = 0;
let noteDuration = 0.5;
let tempo = 80;
let melody = [
  'C5', 'C5', 'G5', 'G5',
  'A5', 'A5', 'G5',
  'F5', 'F5', 'E5',
  'E5', 'D5', 'D5', 'C5'
];
let randomize = (min, max) => Math.random() * (max - min) + min;
let playNote = (note, time) => {
  let osc = audioContext.createOscillator();
  osc.frequency.value = note2freq(note) * randomize(0.5, 1.5);
  osc.type = 'sawtooth';
  osc.connect(audioContext.destination);
  osc.start(audioContext.currentTime + startOffset + time);
  osc.stop(audioContext.currentTime + startOffset + time + noteDuration);
};
melody.forEach((note, index) => {
  playNote(note, index * 60 / tempo);
});

八、Web Audio API振荡器自定义音色

在以下示例中，您可以使用自定义形状来制定胡萝卜型的音色。首先，我们从定义一个 wavetable 开始，然后将其包含在一个 PeriodicWave 中：

let audioCtx = new AudioContext();
let real = new Float32Array([0,0,-1,0,1]);
let imag = new Float32Array([0,1,0,0,0]);
let wave = audioCtx.createPeriodicWave(real, imag);
let osc = audioCtx.createOscillator();
osc.setPeriodicWave(wave);
osc.connect(audioCtx.destination);
osc.start();

九、Web Audio API获取特定时刻的频率

以下是一个简单的范例代码，它可用于获取特定时刻的音频频率：

let audioContext = new AudioContext();
let source = audioContext.createBufferSource();
let analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
source.start();
window.requestAnimationFrame(function update() {
  let data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteTimeDomainData(data);
  window.requestAnimationFrame(update);
});

在这个例子中，我们使用了 AudioContext 和 AnalyserNode 类来获取当前时刻的音频频率。

十、Web Audio API振荡器播放音符序列

以下是一个简单的范例代码，它可以使用 OscillatorNode 在制定时刻播放音符序列：

let audioCtx = new AudioContext();
let start = audioCtx.currentTime;
let frequency = 440;
let duration = 0.5;
let sequence = [5, 3, -4, 3, 5, 5, 5];
sequence.forEach((note, index) => {
  let osc = audioCtx.createOscillator();
  osc.frequency.value = frequency * Math.pow(2, note / 12);
  osc.connect(audioCtx.destination);
  osc.start(start + index * duration);
  osc.stop(start + (index + 1) * duration);
});

在这个例子中，我们使用了 OscillatorNode 类来创建一系列 oscillators，在特定时刻播放音符。序列中的每个数值表示半个音调数值，例如 5 表示五度音。