在AngularJs中使用音频标记渲染音频元素

Question

我正在制作一个带有angularjs的音频播放器和播放列表。

现在我已经从音频标签管理SRC是这样的：

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

而在angularjs控制器

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

这工作得很好。我将它改为在angularjs控制器中创建一个新的Audio元素。我也可以修改src和play。

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

这也适用，但没有界面当然。

问题： 我怎样才能使相关的$ scope.audio音频标签，这样我就不必做一个js接口，播放和暂停音频元素？

谢谢！

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> 

另外这个工程（只是没有角的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)