在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)