时间戳

首页 > 解决方案 > 单击Angular中的另一个音频标签时如何暂停HTML5音频标签？

angular - 单击Angular中的另一个音频标签时如何暂停HTML5音频标签？

问题描述

如果播放另一个音频，我想暂停播放音频。我有这个

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

请帮忙。谢谢

标签： angular

解决方案

您需要获取视图中所有元素的引用，然后循环向它们抛出运行暂停方法

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

现在在模板上绑定音频播放事件的方法

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

播放方法将循环抛出音频元素并暂停

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

查看完整的演示 演示

更新以获得更好的性能

如果我们每次都有很多元素保持循环通过主题只是暂停之一是一种低性能的方式。

简单地说，我们将保存当前播放的音频元素的引用，并在播放另一个元素时停止

  private currentPlayedElem: HTMLAudioElement = null;

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

    this.currentPlayedElem = elm;
  }

演示

推荐阅读