Question

我目前正在开发一款电子应用，我希望能够在桌面上测量吉他输入的音高。

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

编辑：根据评论，FTT似乎并不好，所以我考虑使用谐波产品频谱

我对node.js没有太多经验，但到目前为止，我已设法分解损坏的microphone包并稍微调整一下以便能够获取{{{ 1}}来自wav的格式数据。

这是产生进程并获取数据的实际代码（简化后，它实际上有sox方法产生记录过程）：

startCapture

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

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);

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

我是朝着正确的方向前进的吗？这些数据应该采用什么格式？如何将此数据用于音高检测？

Answer 1

由于您正在获取包含WAV数据的缓冲区，因此您可以使用wav-decoder库对其进行解析，然后将其提供给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 Recording API。

首先，这只适用于Electron 1.7+，因为它使用Chromium 58，Chromium的第一个版本包含a bug which prevented the AudioContext from decoding audio data from the MediaRecorder的修复程序。

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

所以让我们假设你的电子index.html看起来像这样：

<!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

好的，现在转到剩下的代码上。首先，让我们使用所有可用的音频输入设备填充电子窗口中的<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'))
})

您最后会注意到，我们在“电子”窗口中调用了我们在<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()
  }
})

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

让我们停在这里做出一个架构决定。

我们可以录制音频，抓取音频数据并分析它以获得其音高，全部在renderer.js。然而，分析音调数据是一项昂贵的操作。因此，能够在进程外运行该操作将是一件好事。

幸运的是，Electron 1.7支持具有Node上下文的Web worker。创建一个Web worker将允许我们在不同的进程中运行昂贵的操作，因此它不会在运行时阻止主进程（和UI）。

因此，请记住这一点，我们假设我们将在audio-processor.js中创建一个Web工作者。我们稍后会介绍实现，但我们假设它接受带有对象{sampleRate, audioData}的消息，其中sampleRate是采样率，audioData是{{1}我们将传递给Float32Array。

我们也假设：

如果录制处理成功，则工作人员返回带有对象pitchfinder的消息 - 示例为{frequency, key, octave}。
如果录制处理失败，则工作人员会返回{frequency: 440.0, key: 'A', octave: 4}。

让我们编写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

现在，如果你一起运行这些...... 它将无效！为什么？

我们需要更新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)) }（或主脚本的名称），以便在创建主Electron窗口时，Electron被告知在Web worker的上下文中提供Node支持。否则，main.js不会按我们的意愿行事。

这很简单，我们只需要在窗口的require('pitchfinder')对象中添加nodeIntegrationInWorker: true即可。例如：

webPreferences

现在，如果你运行你已经放在一起的东西，你会得到一个简单的电子应用程序，它可以让你录制一小部分音频，测试它的音高，然后显示那个音高到屏幕。

这对于小型音频片段效果最佳，因为音频越长，处理时间越长。

如果您想要一个更深入的更完整的示例，例如能够倾听并返回音高，而不是让用户点击记录并一直停止，请查看electron-tuner app我做了。随意查看源代码，看看事情是如何完成的 - 我已尽力确保评论得很好。

以下是它的截图：

希望这一切都有助于您的努力。

间距检测 - Node.js

1 个答案: