Angular和p5.js-p5.loadSound不是函数 [英] Angular and p5.js - p5.loadSound is not a function

问题描述

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

I have a problem when want to use p5.js in my Angular project.

我使用Angular CLI. 在我的 .angular-cli.json 文件中包含p5.js:

I use Angular CLI. Include p5.js in my .angular-cli.json file:

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

然后在我的组件中编写:

Then in my component I write:

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告诉我 错误TypeError:p.loadSound不是函数

And then when I want load my song and use loadSound(), JS tells me ERROR TypeError: p.loadSound is not a function

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

Ok, JS can't find this method in my file, but in browser console I can write something like this:

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

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

我试图在组件中编写

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

它不起作用.

我在做什么错了?

推荐答案

替换

import * as p5 from 'p5';

*

declare var p5: any;

这篇关于Angular和p5.js-p5.loadSound不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！