是否可以使用 javascript 将频率赫兹数组转换为音频缓冲区？答案

【问题标题】：Is it possible to convert frequency hertz array to audiobuffer using javascript?是否可以使用 javascript 将频率赫兹数组转换为音频缓冲区？
【发布时间】：2019-09-20 13:50:19
【问题描述】：

数组第一列是频率，第二列是播放时间。

// create web audio api context
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();

function playNote(frequency, duration) {
  // create Oscillator node
  var oscillator = audioCtx.createOscillator();

  oscillator.type = 'sawtooth';
  oscillator.frequency.value = frequency; // value in hertz
  oscillator.connect(audioCtx.destination);
  oscillator.start();

  setTimeout(
    function() {
      oscillator.stop();
      playMelody();
    }, duration);
}

function playMelody() {
  if (notes.length > 0) {
    note = notes.pop();
    playNote(note[0],note[1]);
  }
}

notes = [[67.40,14.84],
[58.60,17.06],
[69.80,14.33],
[69.80,14.33],
[66.30,15.08],
[62.30,16.05],
[66.90,14.95],
[65.00,15.38],
[66.00,15.15],
[88.40,11.31],
[60.60,16.50],
[63.90,15.65],
[114.20,8.76],
[114.20,8.76],
[99.70,10.03],
[344.90,2.90],
[344.90,2.90],
[70.00,14.29],
[310.90,3.22],
[310.90,3.22],
[68.30,14.64],
[71.30,14.03],
[69.40,14.41],
[101.70,9.83],
[70.40,14.20],
[67.20,14.88],
[76.00,13.16],
[59.60,16.78],
[73.30,13.64],
[62.10,16.10],
[72.60,13.77],
[76.60,13.05],
[76.80,13.02],
[52.90,18.90],
[69.50,14.39],
[72.90,13.72],
[69.90,14.31],
[69.60,14.37]];

notes.reverse();
tempo = 100;

playMelody();

我能够使用音频上下文以顺序方式播放频率代码，但我需要一种将这种方式转换为音频文件或 AudioBuffer 的方法。我想用这些频率设计一个频谱图。

【问题讨论】：

标签： javascript audiocontext audiobuffer

【解决方案1】：

我不完全确定上面的例子是否真的在做你想做的事。如果我理解正确的话，它或多或少是一次演奏所有音符。它还使用 setTimeout 来停止不是超级准确的振荡器。因此我创建了一个简单的例子来播放Mozart's "Kleine Nachtmusik" 的前两个小节。这是众所周知的，因此希望更容易验证代码是否真的在做我们希望它做的事情。

const NOTES = [ [ 783.99, 0.5 ], [ 0, 0.25 ], [ 587.33, 0.25 ], [ 783.99, 0.5 ], [ 0, 0.25 ], [ 587.33, 0.25 ], [ 783.99, 0.25 ], [ 587.33, 0.25 ], [ 783.99, 0.25 ], [ 987.77, 0.25 ], [ 1174.7, 0.25] ];

起初我创建了一个笔记数组。如您的示例所示，每个音符都由频率和持续时间组成。

接下来我定义了一个函数，该函数期望使用 AudioContext 和一个音符数组进行调用，然后安排这些音符按顺序播放。

function playNotes (context, notes) {
    notes.reduce((offset, [ frequency, duration ]) => {
        const oscillatorNode = context.createOscillator();

        oscillatorNode.frequency.value = frequency;

        oscillatorNode.start(offset);
        oscillatorNode.stop(offset + duration);

        oscillatorNode.connect(context.destination);

        return offset + duration;
    }, context.currentTime);
}

函数循环遍历所有给定的音符。它将为它们中的每一个创建一个 OscillatorNode。它在前一个结束时启动该 OscillatorNode，并在达到持续时间时再次停止它。

现在可以像这样使用该函数：

const audioContext = new AudioContext();

playNotes(audioContext, NOTES);

但最大的优势是我们可以使用 OfflineAudioContext 调用相同的函数。

const sampleRate = 44100;
const offlineAudioContext = new OfflineAudioContext({ length: 3.25 * sampleRate, sampleRate });

playNotes(offlineAudioContext, NOTES);

这只会安排音符，但不会产生任何可听见的声音。一个 OfflineAudioContext 将改为生成一个 AudioBuffer，这可能是您想要的。您可以通过调用 startRendering 来渲染该缓冲区。

offlineAudioContext
    .startRendering()
    .then((audioBuffer) => console.log(audioBuffer));

请注意，此代码在 Safari 中不起作用，因为它不支持最新版本的 Web Audio API。但是你可以通过编写一些额外的代码来让它工作。因为我是 standardized-audio-context 的作者，所以我当然建议使用它而不是编写自己的 polyfill 代码。

【讨论】：