Implement Player with Reverb Effect

[palmthree-studio]

Hello,

Surely a silly question but I don't know how to implement my player with the reverb effect.

I've already try this :

playTone(){
    const player = new Tone.Player(this.songUrl);
    var decay = this.reverb / 100;
    const reverb = new Tone.Reverb(decay).toDestination();
    player.connect(reverb);
    Tone.loaded().then(() => {
      player.start();
    });
 }

But it's thrown me this error :

Error: Uncaught (in promise): InvalidAccessError: The given destination is not connected

It works perfectly without the reverb effect, so maybe I missed something ...

Please help me, I'm searching since 2 hours ....

[dirkk0]

var decay = this.reverb / 100; what is this?

[palmthree-studio]

var decay = this.reverb / 100; what is this?

It's the reverb decay value that I used when I was using PizzicatoJS

The typical result is 0.5, but the user can choose between 0 and 1.

Did I do something wrong ?

[dirkk0]

I don't know. this.reverb is what?

Could you create a CodePen or jsFiddle?

[tambien]

Thanks for the issue @positiv-prod, i'm able to recreate the issue on [email protected], but not on [email protected]. I'm looking into what might have changed with this component between those two version.

[tambien]

Here's my codesandbox repro of this issue: https://codesandbox.io/s/magical-banzai-szrez?file=/src/index.ts

[palmthree-studio]

I've just realized that my ToneJS version is 14.7.77, and I always have the same error when I'm trying to add the reverb effect ... Maybe my version of TypeScript or Angular is not compatible ?

This is my package.json :

{
  "name": "myApp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "angular-html-parser": "^1.8.0",
    "audio-effects": "^1.2.4",
    "rxjs": "~6.4.0",
    "tone": "^14.7.7",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.23",
    "@angular/cli": "~8.3.23",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

[palmthree-studio]

So, I've updated my project until Angular 13 with Typescript 4.4.4, and I always have the same error ...

When I try on Chrome, I have this error too :

Error: Uncaught (in promise): InvalidAccessError: Failed to execute 'disconnect' on 'AudioNode': output (0) is not connected to the input (1) of the destination.

Maybe it can help to find the solution ?

Thanks !

[tambien]

It seems like the error is being thrown from a call to disconnect, is there a part of your code where you invoke the disconnect method?

[palmthree-studio]

No I never calling it, I'm using the same code than you gived me ...

[tambien]

Does the codesandbox that i posted work for you?

[palmthree-studio]

So I've created a Angular Stackblitz (With the mp3 URL that you put on the codesandbox), and it seems to work ... My file in my code is an audio MP4, maybe it is the cause of this problem ?

[palmthree-studio]

I've search more in depth and my file is an Base64 Audio MP4, maybe it's the cause of the problem ? Because when I'm downloading the file by myself and serve it in a direct url, it's working like a charm ...