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并播放。

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

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

1 个答案: