1

我正在尝试使用 ml5 和 p5 在我的反应应用程序中使用音高检测功能。我相信我在这里使用的 ml5 代码连接到 CREPE 音高识别模型。当我尝试编译包含我的代码的组件时，我收到此错误：

Failed to compile.
src/components/PitchPage.js
  Line 17:11:  'stream' is not defined  no-undef
  Line 18:22:  'stream' is not defined  no-undef
Search for the keywords to learn more about each error.

我想知道是否有人可以帮助我找出问题所在以及如何使我的音高识别代码正常工作。有人可以发布可能有效的代码吗？我有一种感觉，也许我需要使用类、组件和渲染，但我不确定。谢谢！这是我的代码：

import React from "react";
import * as ml5 from "ml5";
import P5Wrapper from "react-p5-wrapper";

function PitchPage() {
    let audioContext;
        let mic;
        let pitch;

        async function setup() {
          audioContext = new AudioContext();
          stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
          startPitch(stream, audioContext);
          console.log("hi")
        }
        setup();

        function startPitch(stream, audioContext) {
          pitch = ml5.pitchDetection('./model/', audioContext, stream, modelLoaded);
        }

        function modelLoaded() {
          document.querySelector('#status').textContent = 'Model Loaded';
          getPitch();
        }

        function getPitch() {
          pitch.getPitch(function (err, frequency) {
            if (frequency) {
              document.querySelector('#result').textContent = frequency;
              console.log(frequency)
            } else {
              document.querySelector('#result').textContent = 'No pitch detected';
            }
            getPitch();
          })
        }
    // console.log(react-p5)
    // console.log(typeof p5)
    return (
        <div>
    <h1>Pitch Detection Example</h1>
    <p id='status'>Loading Model...</p>
    <p id='result'>No pitch detected</p>
        </div>
    );
  }
  
  export default PitchPage;

4

0 回答 0