Question

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

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

请帮助。谢谢

Answer 1

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

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

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

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

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

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

查看完整的演示?demo ?

已更新，以提高性能??

如果每次我们都有很多遍历主题的元素保持循环，只是其中之一是低效的方式。

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

  private currentPlayedElem: HTMLAudioElement = null;

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

    this.currentPlayedElem = elm;
  }

demo ?

Answer 2

您可以从模板中省略<audio>元素，并将播放器逻辑移至服务：

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

更新演示：https://angular-eg8uik.stackblitz.io/

您可以使用addEventListener()来跟踪玩家的状态。将其传递给Observable流，并在您的组件中使用它。

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

将getState()传递到您的自定义音频播放器组件，并相应地更新按钮。

您还可以添加用于加载，播放，暂停，停止，搜索，currentTime值等的功能。

这将很好地扩展，因为无论视图中有多少文件，您只有一个MediaElement和两个EventListeners。您的UI也更加灵活，就设计而言，原生<audio>元素非常有限。

Answer 3

在捕获阶段将侦听器添加到播放事件，并暂停除目标文件之外的所有音频文件：

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

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

3 个答案: