javascript - 将音频元素链接在一起 HTML/AngularJS

Question

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

我有一个复选框，如果选中则运行一个函数。

HTML:

<input type="checkbox" value="data.id" id="status" ng-model="data.status" class="Form-label-checkbox" ng-change="IfCheck(data.Url)">

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

到目前为止，这似乎运作良好。数组 ids 会动态填充 URL。然后，我在此数组上运行 ng-repeat，并创建一个以源作为 url 的元素。这也有效。

HTML:

<div ng-repeat="data in ids">
<audio controls>
                    <source src="{{data.Url | trustUrl}}" id = "Synth.wav" type="audio/mpeg">
                    Your browser does not support the audio element.
                    </audio> </div>

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

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

但我不确定如何编写函数来“链接”到创建的元素。

Answer 1

Playall() 函数看起来像这样:

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