Angular 和 p5.js - p5.loadSound 不是一个函数

Question

我想在我的 Angular 项目中使用 p5.js 时遇到问题。

我使用Angular CLI。 在我的.angular-cli.json文件中包括p5.js：

"scripts": [    
"../node_modules/p5/lib/p5.min.js",   
"../node_modules/p5/lib/addons/p5.sound.js",   
"../node_modules/p5/lib/addons/p5.dom.js"  
],

然后在我的组件中我写：

import { Component, OnInit } from '@angular/core';
import * as p5 from 'p5';
@Component({
selector: 'app-player',
templateUrl: './player.component.html',
styleUrls: ['./player.component.scss']
})
export class PlayerComponent implements OnInit {
play: boolean = false;
constructor() { }
ngOnInit() {
const s = (p) => {
let song;
let canvas;
p.preload = () => {
console.log('preload');
song = p.loadSound('assets/music/Thunderstruck.mp3');
}
p.setup = () => {
canvas = p.createCanvas(595, 100);
canvas.parent('equalizer');
p.background(0);
}
}
let player = new p5(s);
}
onPlay() {
this.play = !this.play;
}
}

然后当我想加载我的歌曲并使用loadSound((时，JS 告诉我错误类型错误：p.loadSound 不是一个函数

好的，JS在我的文件中找不到此方法，但是在浏览器控制台中我可以编写如下内容：

let song = p5.prototype.loadSound('assets/music/Thunderstruck.mp3');
song.play();

一切正常(我的控制台截图(！

我试图在我的组件中编写：

song = p.prototype.loadSound('assets/music/Thunderstruck.mp3');

它不起作用。

我做错了什么？

Answer 1

替换

import * as p5 from 'p5';

*

declare var p5: any;

Answer 2

我还不知道为什么，但对我来说，在调用loadSound之前登录p5sound就可以工作了。

跟：

import * as p5 from 'p5';
import * as p5sound from 'p5/lib/addons/p5.sound';

和：

console.log(p5sound)
this.song = s.loadSound('assets/samples/CpW_WetHitE-01.wav');