Rendu Elément audio avec balise Audio dans AngularJs

Question

Je crée un petit lecteur audio et une playlist avec angularjs.

Pour l'instant je gère le src de la balise audio comme ceci:

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

Et dans le contrôleur AngularJS

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

Cela fonctionne très bien. Le je l'ai changé pour créer un nouvel élément audio dans le contrôleur angularjs. Je peux aussi modifier le src et jouer.

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

Cela fonctionne également, mais sans interface bien sûr.

La question: Comment puis-je rendre la balise audio associée au scope.audio de $ pour que je ne dois pas faire une interface js pour jouer et mettre en pause l'élément audio?

Merci!

Answer 1

Je trouve que l'obtention de la balise audio obtient l'élément audio lui-même (et peut accéder au volume ou attribut boucle par exemple), donc j'ai fini de faire ceci:

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

et le code html:

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

cela fonctionne aussi (juste l'idée js sans angulaire):

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)