Javascript 将音频元素链接到HTML/AngularJS

我不完全确定如何运行与网页更新同步的功能

我有一个复选框，如果选中，它将运行函数

Html:

IfCheck函数将url添加到数组$scope.ids中

JavaScript://一种伪代码

$scope IfCheck(url){
    $scope.ids.push(object);}

$scope.Playall = function(){
    var audioElements = document.getElementsByTagName("audio");
    for(var i = 0; i < audioElements.length; i++){
        audioElements[i].play();
    }
}

$scope-IfCheck（url）{
$scope.ids.push（对象）；}
$scope.Playall=函数（）{
var audioElements=document.getElementsByTagName（“音频”）；
对于（var i=0；i

到目前为止，这似乎效果不错。数组ID会动态填充URL。之后，我在这个数组上运行ng repeat，并创建一个以源作为url的元素。这同样有效

HTML:

您的浏览器不支持音频元素。

我现在的问题是这个。假设我选中两个框，并动态创建两个音频播放器。如果我点击播放按钮，他们就会播放音乐。有没有办法制作一个按钮，让它同时播放这两个按钮？我想到了类似的事情

<button ng-click = "Playall()"> Playall </button> 

Playall

但是我不知道如何编写函数来“链接”到已创建的元素。

函数可以如下所示：

$scope.Playall = function(){
    Array.from(document.getElementsByTagName("audio")).forEach(audio => audio.play());
}

或：

$scope.Playall=function（）{
var audioElements=document.getElementsByTagName（“音频”）；
对于（var i=0；i

谢谢你的回答。问题是如果我点击这个按钮，它会“加倍”播放。因此，Playall功能将有一个playthrough，同时单个音频播放器也将开始播放。@ellusion您的意思是什么？它是否会多次播放同一个音频文件？

文档。getElementsByTagName（“音频”）

将获取页面上的所有

音频

元素，您可能希望更改此设置，以便它仅获取应启动的

音频

元素。完全正确。如果我有两首歌，它会同时播放每个文件两次time@ellusion只需向

audio

元素添加一个类名，该元素应该由

Playall

函数启动，而不是

document.getElementsByTagName（“audio”）

使用

document.querySelectorAll（.someClassName”）

或

document.getElementsByClassName（“someClassName”）

<button ng-click = "Playall()"> Playall </button> 

$scope.Playall = function(){
    Array.from(document.getElementsByTagName("audio")).forEach(audio => audio.play());
}

$scope.Playall = function(){
    var audioElements = document.getElementsByTagName("audio");
    for(var i = 0; i < audioElements.length; i++){
        audioElements[i].play();
    }
}