Anna F Anna F - 1 year ago 149
TypeScript Question

Play 2 sounds one after another in Angular2

I have two sounds

say_1() { //music = './sound1.wav';;
// auto-start;
say_2() { //speech = './sound2.wav';;
// auto-start;

And I would like to make method
which plays one sound after another

play_all () {

So, I would like to play as first my music and after that the speech,
but in my method it plays just second wav and I guess it's because I have this method

ngOnDestroy() {
// destroy audio here
if ( {; = null;

I need this method, because if I leave page ( go to the next page via router ) music from previous page still plays.

How could I modify my method, so it would play both sound one after another?

Answer Source

The reason is that the audio is being played asynchronously. It means this play() method does not wait until the playback has finished.

In order to play these sounds one after another you have to start playing your second file when ended event happened.

The most naive solution could look like this:

 say_1() { //music = './sound1.wav'; 

    // whenever playback ends call the next function = () => { = null;

 say_2() { //speech = './sound2.wav';;;

Then instead of playAll() you could just invoke the say_1() method.

You could also extract this into a AudioPlayerService somehow like this:

export class AudioPlayerService {

    playbackEndedSource = new Subject<string>();
    playbackEnded$ = this.playbackEndedSource.asObservable();

    constructor() {
        // initialization'ended', () =>;


    play(path: string): void { = path;;;


Then you could do it like this

export class AppComponent {
    constructor(private player: AudioPlayerService) {}

    playAll() {

        const subscription = player.playbackEnded$
            .subscribe(() => {
                // to prevent it from playing over and over again

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download