音调检测 - Node.js

Question

我目前正在开发一个 Electron 应用程序，我希望它能够测量桌面上吉他输入的音高。

我最初的想法是一次一个音调，所以请告诉我 FTT 是否合适。

编辑：根据评论，FTT 似乎不是很好，因此我正在考虑使用谐波积谱，例如

我对 node.js 没有太多经验，但到目前为止，我已经设法 fork 损坏的 microphone 包并稍微调整它以便能够获取 wav 格式化来自 sox.

的数据

这是生成进程和获取数据的实际代码（经过简化，它实际上有一个生成记录进程的 startCapture 方法）：

const spawn = require('child_process').spawn;
const PassThrough = require('stream').PassThrough;

const audio = new PassThrough;
const info = new PassThrough;

const recordingProcess = spawn('sox', ['-d', '-t', 'wav', '-p'])
recordingProcess.stdout.pipe(audio);
recordingProcess.stderr.pipe(info);

在另一个 js 文件中，我监听数据事件：

mic.startCapture({format: 'wav'});
mic.audioStream.on('data', function(data) {
    /* data is Uint8Array[8192] */
});

好的，我得到了一组数据，这似乎是一个好的开始。我知道我应该以某种方式应用音高检测算法来开始音高分析

我的方向对吗？这些数据应该是什么格式？我如何使用这些数据进行音调检测？

Answer 1

由于您正在获取包含 WAV 数据的缓冲区，因此您可以使用 wav-decoder library to parse it, and then feed it to the pitchfinder 库来获取音频的频率。

const Pitchfinder = require('pitchfinder')
const WavDecoder = require('wav-decoder')
const detectPitch = new Pitchfinder.YIN()

const frequency = detectPitch(WavDecoder.decode(data).channelData[0])

但是，由于您使用的是 Electron，因此您也可以只使用 Chromium 中的 MediaStream 记录 API。

首先，这只适用于 Electron 1.7+，因为它使用 Chromium 58，第一个包含 a bug which prevented the AudioContext from decoding audio data from the MediaRecorder.

修复的 Chromium 版本

此外，出于此代码的目的，我将使用 ES7 async 和 await 语法，运行在 Node.js 7.6+ 上应该没问题和 Electron 1.7+.

所以让我们假设您的 index.html for Electron 看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Frequency Finder</title>
  </head>
  <body>
    <h1>Tuner</h1>

    <div><label for="devices">Device:</label> <select id="devices"></select></div>

    <div>Pitch: <span id="pitch"></span></div>
    <div>Frequency: <span id="frequency"></span></div>

    <div><button id="record" disabled>Record</button></div>
  </body>

  <script>
    require('./renderer.js')
  </script>
</html>

现在让我们开始处理 renderer 脚本。首先，让我们设置一些我们将要使用的变量：

const audioContext = new AudioContext()
const devicesSelect = document.querySelector('#devices')
const pitchText = document.querySelector('#pitch')
const frequencyText = document.querySelector('#frequency')
const recordButton = document.querySelector('#record')
let audioProcessor, mediaRecorder, sourceStream, recording

好的，现在开始剩下的代码。首先，让我们用所有可用的音频输入设备填充 Electron window 中的 <select> 下拉列表。

navigator.mediaDevices.enumerateDevices().then(devices => {
  const fragment = document.createDocumentFragment()
  devices.forEach(device => {
    if (device.kind === 'audioinput') {
      const option = document.createElement('option')
      option.textContent = device.label
      option.value = device.deviceId
      fragment.appendChild(option)
    }
  })
  devicesSelect.appendChild(fragment)

  // Run the event listener on the `<select>` element after the input devices
  // have been populated. This way the record button won't remain disabled at
  // start.
  devicesSelect.dispatchEvent(new Event('change'))
})

你会在最后注意到，我们调用了我们在 Electron window 中的 <select> 元素上设置的事件。但是，等等，我们从来没有写过那个事件处理程序！让我们在刚刚编写的代码之上添加一些代码：

// Runs whenever a different audio input device is selected by the user.
devicesSelect.addEventListener('change', async e => {
  if (e.target.value) {
    if (recording) {
      stop()
    }

    // Retrieve the MediaStream for the selected audio input device.
    sourceStream = await navigator.mediaDevices.getUserMedia({
      audio: {
        deviceId: {
          exact: e.target.value
        }
      }
    })

    // Enable the record button if we have obtained a MediaStream.
    recordButton.disabled = !sourceStream
  }
})

让我们实际为录制按钮编写一个处理程序，因为此刻它什么都不做：

// Runs when the user clicks the record button.
recordButton.addEventListener('click', () => {
  if (recording) {
    stop()
  } else {
    record()
  }
})

现在我们显示音频设备，让用户 select 它们，并有一个录音按钮...但我们仍然有未实现的功能 - record() 和 stop()。

让我们在这里停下来做出架构决定。

我们可以录制音频、抓取音频数据并对其进行分析以获得音调，所有这些都在 renderer.js 中。然而，分析音调数据是一项昂贵的操作。因此，最好能够运行该操作在进程外进行。

幸运的是，Electron 1.7 引入了对具有 Node 上下文的网络工作者的支持。创建一个 web worker 将允许我们运行在不同的进程中进行昂贵的操作，因此它不会在运行ning 时阻塞主进程（和 UI）。

记住这一点，让我们假设我们将在 audio-processor.js 中创建一个网络工作者。稍后我们将讨论实现，但我们假设它接受带有对象 {sampleRate, audioData} 的消息，其中 sampleRate 是采样率，audioData 是 Float32Array 我们将传递给 pitchfinder.

我们还假设：

如果记录处理成功，工作人员 return 将发送一条包含对象 {frequency, key, octave} 的消息 - 例如 {frequency: 440.0, key: 'A', octave: 4}。
如果记录处理失败，工作人员 return 会发送一条包含 null 的消息。

让我们编写 record 函数：

function record () {
  recording = true
  recordButton.textContent = 'Stop recording'

  if (!audioProcessor) {
    audioProcessor = new Worker('audio-processor.js')

    audioProcessor.onmessage = e => {
      if (recording) {
        if (e.data) {
          pitchText.textContent = e.data.key + e.data.octave.toString()
          frequencyText.textContent = e.data.frequency.toFixed(2) + 'Hz'
        } else {
          pitchText.textContent = 'Unknown'
          frequencyText.textContent = ''
        }
      }
    }
  }

  mediaRecorder = new MediaRecorder(sourceStream)

  mediaRecorder.ondataavailable = async e => {
    if (e.data.size !== 0) {
      // Load the blob.
      const response = await fetch(URL.createObjectURL(data))
      const arrayBuffer = await response.arrayBuffer()
      // Decode the audio.
      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
      const audioData = audioBuffer.getChannelData(0)
      // Send the audio data to the audio processing worker.
      audioProcessor.postMessage({
        sampleRate: audioBuffer.sampleRate,
        audioData
      })
    }
  }

  mediaRecorder.start()
}

一旦我们使用 MediaRecorder 开始录制，我们将不会调用 ondataavailable 处理程序，直到录制停止。现在是编写我们的 stop 函数的好时机。

function stop () {
  recording = false
  mediaRecorder.stop()
  recordButton.textContent = 'Record'
}

现在剩下的就是在 audio-processor.js 中创建我们的 worker。让我们继续创建它。

const Pitchfinder = require('pitchfinder')

// Conversion to pitch from frequency based on technique used at
// https://www.johndcook.com/music_hertz_bark.html

// Lookup array for note names.
const keys = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']

function analyseAudioData ({sampleRate, audioData}) {
  const detectPitch = Pitchfinder.YIN({sampleRate})

  const frequency = detectPitch(audioData)
  if (frequency === null) {
    return null
  }

  // Convert the frequency to a musical pitch.

  // c = 440.0(2^-4.75)
  const c0 = 440.0 * Math.pow(2.0, -4.75)
  // h = round(12log2(f / c))
  const halfStepsBelowMiddleC = Math.round(12.0 * Math.log2(frequency / c0))
  // o = floor(h / 12)
  const octave = Math.floor(halfStepsBelowMiddleC / 12.0)
  const key = keys[Math.floor(halfStepsBelowMiddleC % 12)]

  return {frequency, key, octave}
}

// Analyse data sent to the worker.
onmessage = e => {
  postMessage(analyseAudioData(e.data))
}

现在，如果你运行这一切在一起...... 它不会工作！ 为什么？

我们需要更新 main.js（或者您的主脚本的任何名称），以便在创建主 Electron window 时，告知 Electron 在网络工作者。否则，require('pitchfinder') 不会执行我们希望它执行的操作。

这个很简单，我们只需要在window的webPreferences对象中添加nodeIntegrationInWorker: true即可。例如：

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegrationInWorker: true
  }
})

现在，如果你运行把你放在一起的东西，你会得到一个简单的 Electron 应用程序，它可以让你录制一小段音频，测试它的音高，然后将该音高显示到屏幕上.

这最适用于音频的小片段，因为音频越长，处理时间就越长。

如果您想要一个更完整、更深入的示例，例如收听和 return 直播的能力，而不是让用户一直点击录制和停止，请查看electron-tuner app 我做的。请随意查看源代码以了解事情是如何完成的 - 我已尽我所能确保它得到很好的评论。

这是它的屏幕截图：

希望这一切对你的努力有所帮助。

音调检测 - Node.js

Pitch detection - Node.js

javascript

audio

fft

node.js