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

2024-03-08

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

我使用 Angular CLI。 将 p5.js 包含在我的.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"  
],

然后在我的组件中我写:

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;

  }

}

然后当我想加载我的歌曲并使用时加载声音(),JS告诉我错误类型错误:p.loadSound 不是函数

好吧,JS 在我的文件中找不到这个方法,但是在浏览器控制台中我可以写这样的东西:

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

一切正常(我的控制台的屏幕截图 http://prntscr.com/g1jx40)!

我尝试在我的组件中写入:

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

这不起作用。

我究竟做错了什么?


Replace

import * as p5 from 'p5';

*

declare var p5: any;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 和 p5.js - p5.loadSound 不是函数 的相关文章

  • 令牌中不存在必需的声明 nbf(使用 Firebase Microsoft Sign In 尝试访问 Microsoft Graph)

    我目前有一个具有以下结构的应用程序 Angular 前端 Node js 服务器 我们已实施 Google Cloud 的身份提供商以使用 Google 和 或 Microsoft 进行登录 Google 登录并访问 Google Clou
  • 将指令外部的值传递给父指令时,“错误:输出未定义”

    我有一个 root app 组件 它在模板中是这样定义的 template
  • http.put 请求在 Angular2 中执行两次

    我正在尝试更新从我的 Angular2 应用程序调用 API 的公司记录 我在调试时注意到 http 调用被执行了两次 我找到了另一个堆栈溢出线程 https stackoverflow com questions 37241294 ang
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • 如何避免 TypeScript 中出现虚假的“未使用参数”警告

    我遇到过很多次这种情况 最后决定弄清楚正确的方法是什么 如果我有一个声明方法的抽象父类 然后一些具体子类在其实现中实现真正的逻辑 并且显然使用方法参数 但某些子类不需要在该方法中执行任何操作 因此不要使用方法参数 那些不必执行任何操作的方法
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 为什么 Angular 2 项目如此大 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在用 ng2 重写 ng1 项目 我们的 ng1 项目构建后大约有 8mb 我们对 ng2 的重写已经完成了大约四分之一 并且我
  • Typescript 模块解析的根路径

    我有两个使用打字稿的项目 一个是核心项目 moduleA 另一个是业务项目 moduleB 项目B使用项目A的模块 ts文件 位于 scripts文件夹 我想通过以下方式为projectB指定模块解析根文件夹projectA scripts
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • Windows 10 中的 npm 安装错误( npm install -g angular-cli )

    node v v4 5 0 npm v 5 0 1 有人在 Windows 10 中安装 angular cli 时遇到过这种问题吗 请尝试以下操作 step 0 运行这个命令 npm uninstall g angular cli npm
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • 在 Angular 中获取当前路由路径名称的最简单方法是什么?

    我正在寻找一种获取当前路线的路径名称的好方法 这是我能找到的最简单的 this route snapshot firstChild url 0 path 有没有更好的办法 谢谢 谢谢大家的回答 这是我发现我必须做的 router event
  • 角度代理配置不起作用

    我不明白我错在哪里 附 已经尝试通过这个答案修复但仍然不起作用 Angular CLI 代理到后端不起作用 https stackoverflow com questions 39809008 angular cli proxy to ba
  • 在 TypeScript 中编译枚举

    What do enums 在 TypeScript 运行时变成 Fruit ts enum Fruit APPLE ORANGE main ts var bowl Fruit APPLE Fruit ORANGE console log
  • 由于 CORS 错误,POST 请求在 React axios 中被阻止[重复]

    这个问题在这里已经有答案了 我正在尝试向包含多部分数据的 API 发送 POST 请求 我在 postman 中测试了 API 一切正常 但是当我在react中调用API时 它给了我CORS错误 我交叉检查了 URL 标头和数据 对我来说一
  • Angular 2+ 源代码中的 ɵ(类似 Theta)符号

    在深入研究 Angular 4 3 源代码后 我经常遇到 符号 例如 在异步管道源 https github com angular angular blob 4 3 2 packages common src pipes async pi
  • Angular Material 7 多重选择 - 设置选定值

    我正在尝试设置多选下拉列表的选定值 如下所示 循环根据条件选择多个复选框并进行设置 document getElementsByTagName mat pseudo checkbox index classList add mat pseu

随机推荐