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。