Html 如何使所有其他音频播放器在播放新内容时停止？（角度）

我正在制作一个网站，在Angular中播放我的音乐，我想让其他音频播放器在播放新音乐时停止播放。有人有这样的脚本吗

HTML

---

无论何时播放新的

音频

，都可能触发事件。在该事件中，处理程序访问

audio

元素，并在其他

audio

元素上显式调用

pause（）

document.addEventListener('play', function(e){
  var players = document.getElementsByTagName('audio');
  [...players].forEach(player => {
    if(e.target != player){
      player.pause();
    }
  });
});

下面是一个演示：

var players=document.getElementsByTagName（'audio'）；
Array.from（玩家）.forEach（玩家=>{
player.addEventListener（'play'，playHandler）
});
函数playHandler（e）{
[…玩家].forEach（玩家=>{
如果（例如，目标！=玩家）{
player.pause（）；
}
});
}

我在src/app/app shell/radiotacje/grid box/grid box.component.ts（26,3）中收到一个错误：错误TS2304:找不到名称“players”。忘记添加行以获取

音频

元素并分配给

players

变量。在回答中补充了这一点。请检查。是的，它是有效的，但还有一个问题，我如何解决这个问题？错误TS2339:类型“HTMLCollectionOf”上不存在属性“forEach”。请使用

[…players]。forEach（）

很抱歉占用您的时间，但我有另一个错误TS2461:类型“HTMLCollectionOf”不是数组类型。打字稿很奇怪。

import { Component, OnInit, Input, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-grid-box',
  templateUrl: './grid-box.component.html',
  styleUrls: ['./grid-box.component.css']
})
export class GridBoxComponent implements OnInit {

  @Input() key: number;
  @Input() header: string;
  @Input() description: string;
  @Input() image: string;
  @Input() audioref: string;


  constructor() { }

  ngOnInit() { }

}

document.addEventListener('play', function(e){
  var players = document.getElementsByTagName('audio');
  [...players].forEach(player => {
    if(e.target != player){
      player.pause();
    }
  });
});