在 React 中使用 p5 和 ml5

问题描述

我正在尝试使用 ml5 和 p5 在我的 React 应用程序中获得音高检测功能。我相信我在这里使用的 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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）