javascript - 在 AngularJs 中使用音频标签渲染音频元素

Question

我正在使用 angularjs 制作一个小型音频播放器和播放列表。

现在我一直在像这样管理来自音频标签的 src:

<audio id="audio" controls="controls">
    <source ng-src="{{mainAudioSrc}}" type="audio/mpeg">
</audio>

在 angularjs Controller 中

$scope.setAudioSrc = function(audioSrc){
   $scope.mainAudioSrc = audioSrc;
   var audio = document.getElementById('audio');
   audio.load();
   audio.play();
};

这很好用。我将其更改为在 angularjs Controller 中创建一个新的音频元素。我也可以修改src播放。

$scope.audio = new Audio();
...code...
$scope.audio.src = audioSrc; 
$scope.audio.load();
$scope.audio.play();

这也可以，但当然没有界面。

问题:我如何呈现与 $scope.audio 关联的音频标签，这样我就不必制作 js 接口(interface)来播放和暂停音频元素？

谢谢!

Answer 1

我发现获取音频标签获取音频元素本身(例如可以访问音量或循环属性)，所以我结束了这样做:

$scope.audio = document.getElementById('audio')
$scope.audio.volume = 0.8;
$scope.audio.src = someUrlToAudioSrc;    
$scope.audio.load();
$scope.audio.play();

和 html:

<audio id="audio" controls="controls">
    <source type="audio/mpeg">
</audio>

这也有效(只是没 Angular js 想法):

a = new Audio();
a.src = someSrc;
a.loop = false; 
a.controls = true; // <- The important thing, show element controls.
// Append element to document, for example
document.getElementsByTagName('body')[0].appendChild(a)