Howler in Angular, how to have a sound stop onend

I am using howler.js in my Angular app. For now I have two sounds playing at the same time. What I want is my drum sound to stop whenever sound stop. I do get the ('stop') console.log but my stop() function is not triggered. I've created a button to trigger and it works fine but it's not the way I want to implement the stop() function.

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()

  }
}

How can I make a sound stops when another one does?

You should use arrow function instead:

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

The whole point of arrow functions is that they use the this of their parent scope.