感谢我在Github问题页面（https://github.com/processing/p5.js-sound/issues/453）上得到的帮助，我找到了如何导入P5.sound库的方法。
首先，我在node_modules中安装了P5.js，然后安装了P5.js版本0.9.0：

npm uninstall p5
npm install [email protected]

字符串
接下来，在node_modules中找到P5模块后，我复制了P5声音库文件并将其粘贴到我的项目的src目录中，然后将import P5sound from "p5/lib/addons/p5.sound"替换为import "../p5.sound.js"（代表我的相对文件路径）。然后我使用以下命令在终端中安装了最新版本的P5.js：

npm install p5@1

型
现在我可以导入声音库而不会得到错误ReferenceError: p5 is not defined或p5.FFT is not a constructor。

问题是p5-sound依赖于p5的全球可用性。
如果你使用的是webpack，可以通过webpack的ProvidePlugin轻松解决，如下所示：

plugins: [
    new webpack.ProvidePlugin({
      p5: 'p5',
    })
  ]

字符串
然后，您应该能够通过以下方式导入：

import p5 from 'p5';
import 'p5/lib/addons/p5.sound';

型

我在react中使用p5时也遇到了类似的问题，但我能够通过在html文件中包含p5脚本来实现这一点（暂时没有）。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script>

字符串
然后在React中创建我的p5示例时，我调用：

new window.p5(sketch, node);

型
我的草图文件看起来像这样：

const sketch = (p, props) => {
  p.preload = () => {
    ...
  };

  p.setup = function () {
    ...
  };

  p.draw = () => {
    ...
  };
};

export default sketch;

型
在我的sketch逻辑中，我使用示例p变量来实现标准的p5.js功能，比如绘制形状。每当我需要使用p5类的构造函数，比如AudioIn，Amplitude，SoundFile等，我都会使用全局p5变量来创建它。例如：

new window.p5.AudioIn()

型
我相信这是必要的，因为p5声音插件库将函数和类添加到全局p5变量中。当我使用es6导入时，一定有一些混乱，声音插件没有正确添加到导入的p5类中。
希望有一天会有一个更好的p5.js的es6模块系统，但这似乎对我来说很有用。

我使用ViteSSG（Vite的静态站点生成器）来设置我的Vue应用程序，并在主入口文件main.ts中全局注册p5.js。

主入口文件：main.ts

import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
import { setupLayouts } from 'virtual:generated-layouts'
import { routes } from 'vue-router/auto/routes'
import p5 from 'p5'

import 'uno.css'
import 'animate.css'
import './style.css'
import 'splitting/dist/splitting.css'
import 'splitting/dist/splitting-cells.css'

// Register p5 as a global variable
window.p5 = p5

export const createApp = ViteSSG(
  App,
  {
    routes: setupLayouts(routes),
    base: import.meta.env.BASE_URL,
  },
  ({ app, router, routes, isClient, initialState }) => {},
)

字符串
这样，p5就被设置为一个全局变量，可以在任何Vue组件中访问。

Vue组件示例在Vue组件中，我可以直接使用p5来加载和操作音频文件。

<template>
  <div ref="canvasWrapper"></div>
</template>

<script setup>
import '~/models/p5.sound'

let song

const preload = (p) => {
  console.log(p)
  song = p.loadSound('The_Deep.mp3')
}

onMounted(() => {
  new p5(preload)
})
</script>

型
我认为这个实现并不优雅，但它暂时解决了我目前的问题。我希望p5.js将来能有更好的ES6支持。