Angular 中的咆哮声，如何让声音停止

Question

我在 Angular 应用程序中使用 howler.js。现在我有两个声音同时播放。我想要的是我的 drum 声音在 sound 停止时停止。我确实得到了 ('stop') console.log 但我的 stop() 函数没有被触发。我已经创建了一个触发按钮，它工作正常，但这不是我想要实现 stop() 功能的方式。

import { Component } from '@angular/core';
import { Howl } from 'howler'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  sound = new Howl({
    src: ['https://www.kozco.com/tech/piano2-CoolEdit.mp3'],
    html5 :true,
    onend: function() {
      console.log('stop')
      this.stop()}
  });

  drum = new Howl({
    src: ['https://freesound.org/data/previews/381/381353_1676145-hq.mp3'],
    html5: true,
    loop: true,
    volume: 0.2,
  })

  play() {
    this.drum.play();
    this.sound.play();
    }

  stop() {
    this.drum.stop();
    this.drum.unload();
    this.sound.unload()

  }
}

如何让一个声音在另一个声音停止时停止？

Answer 1

你应该改用箭头函数：

this.sound.on('end', () => {console.log("stop");
                            this.stop()}
);

箭头函数的全部意义在于它们使用父作用域的 this。

Angular 中的咆哮声，如何让声音停止

Howler in Angular, how to have a sound stop onend

angular

howler.js