How to pause HTML5 audio tag when click on another audio tag in Angular?

Question

I want to pause the playing audio if another one is played. I have this

            <ul class="music-list">

                <li *ngFor="let song of Songs">
                    <div class="music-panel">
                        <div class="music-image">
                            <img src="{{ song.song_image }}" alt="music-img">
                        </div>
                        <div class="music-detail">
                            <span class="date-remind">Season 1 / 10 September 2018</span>
                            <h4>{{ song.song_title | titlecase }}</h4>
                            <div class="music-play">
                                <audio controls>
                                    <source src="{{ song.audio_file }}" type="audio/mpeg">
                                </audio>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

Please help. Thanks

Muhammed Albarmavi · Accepted Answer · 2019-12-03 15:15:54Z

2

you need to get a reference of all element in the view then loop throw them an run pause method

@ViewChildren('audio') audioElms :ElementRef[];

now on the template bind a method on the audio play event

<audio controls #audio (play)="paly(audio)">
     <source src="{{ song.audio_file }}" type="audio/mpeg">
 </audio>

the play method will loop throw the audio elment and pause

onPaly(elm:HTMLAudioElement) {
  this.audioElms.forEach(({nativeElement:e})=>{
   if (e !== elm) {
     e.pause();
   }
  })
}

check the complete demo 👉 demo 👓

Updated for better performance 🔥🔥

in case we have many elementd keep loop through theme everytime for just pause one of is a low preformance way.

simply we will save a reference of the current played audio element and stop when we play another one

  private currentPlayedElem: HTMLAudioElement = null;

  onPaly(elm: HTMLAudioElement) {
    if (this.currentPlayedElem && this.currentPlayedElem !== elm ) {
      this.currentPlayedElem.pause();
    }

    this.currentPlayedElem = elm;
  }

demo 🎉

edited Dec 3, 2019 at 15:15

answered Dec 3, 2019 at 12:32

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Friso Hoekstra Over a year ago

If you have 100+ audio files in a view, why would you loop through all of them if you only need to pause one and play another one?

Muhammed Albarmavi Over a year ago

@FrisoHoekstra thanks for mention this problem I have update my answer will very simple way

Friso Hoekstra · Accepted Answer · 2019-12-04 14:32:27Z

1

You could omit the <audio> element from your template and move the player logic to a service:

export class AudioPlayerService {    
    private globalPlayer: HTMLMediaElement = new Audio();    
}

UPDATE Demo: https://angular-eg8uik.stackblitz.io/

You can keep track of the player's state using addEventListener(). Pass it to an Observable stream and use it in your component.

private playerState = new BehaviorSubject<any>({ isPlaying: false });

constructor() {
    this.globalPlayer.addEventListener('play', () => {
        this.playerState.next({ isPlaying: true, audioId: 'foo' });
    });

    this.globalPlayer.addEventListener('pause', () => {
        this.playerState.next({ isPlaying: false });
    });
}

getState(): Observable<any> {
    return this.playerState.asObservable();
}

Pass getState() to your custom audio player component and update the buttons accordingly.

You can also add functions for loading, playing, pausing, stopping, seeking, currentTime values, etc.

This will scale well because you have only one MediaElement and two EventListeners no matter how many files you have in your view. You are also more flexible with your UI, the native <audio> element is pretty limited as far as design goes.

edited Dec 4, 2019 at 14:32

answered Dec 3, 2019 at 13:37

Friso Hoekstra

8852 gold badges9 silver badges24 bronze badges

1 Comment

Muhammed Albarmavi Over a year ago

I like your way and already voted , but can you provide a demo , you can fork one of my answer , this will be very helpful for others 👍

cengiz sevimli · Accepted Answer · 2019-12-03 11:50:08Z

0

Add listener to the play event in the capturing phase and pause all audio file except the target one:

    document.addEventListener('play', function(e){
        var audios = document.getElementsByTagName('audio');
        for(var i = 0, len = audios.length; i < len;i++){
            if(audios[i] != e.target){
                audios[i].pause();
            }
        }
    }, true);

answered Dec 3, 2019 at 11:50

cengiz sevimli

2,2141 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to pause HTML5 audio tag when click on another audio tag in Angular?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related