angularjs Wiedergabe von Audio von einem Link von Firebase

Question

Ich habe ein Problem, einen HTML5 Media Player zu laden, um Audio (OGG) -Datei von einem Link Firebase abzuspielen.

Hier ist meine Ansicht

<my-audio> 
    <audio> 
     <source id="lol" ng-src="{{msg.text}}" /> 
    </audio> 
    <button class="play">Play Music</button> 
    <button class="pause">Pause Music</button> 
</my-audio> 

Hier ist meine Richtlinie

angular.module('myApp') 
.directive('myAudio', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attr) { 
      var player = element.children('.player')[0]; 
      element.children('.play').on('click', function() { 

       player.play(); 

      }); 
      element.children('.pause').on('click', function() { 
       player.pause(); 
      }); 
     } 
    }; 
}); 

{{msg.text}} kommt von einem Feuerbasis Link, Beispiel:

https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9

Answer 1

Das Problem ist, wie Sie die Elemente nach Klasse auswählen, nach angular.element docs, .children() unterstützt Selektor nicht, daher müssen Sie sie auf andere Weise auswählen.

Zum Beispiel:

var $playBtn = angular.element(element[0].getElementsByClassName('play')); 

Ich habe ein Beispiel aus einem statischen Audio-Objekt exemplifizieren:

angular.module('myApp', []) 
 
    .directive('myAudio', function() { 
 
    return { 
 
     restrict: 'E', 
 
     link: function(scope, element, attr) { 
 

 
     // Using a static Audio object 
 
     var player = new Audio('https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9'); 
 
     
 
     var elm = element[0], 
 
      byClass = function(klass) { 
 
      return angular.element(elm.getElementsByClassName(klass)); 
 
      }; 
 

 
     byClass('play') 
 
      .on('click', function() { 
 

 
      player.play(); 
 

 
      }); 
 
     byClass('pause') 
 
      .on('click', function() { 
 
      player.pause(); 
 
      }); 
 
     } 
 
    }; 
 
    }); 
 

 
angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<my-audio> 
 
    <button class="play">Play Music</button> 
 
    <button class="pause">Pause Music</button> 
 
</my-audio> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

UPDATE Added Beispiel mit HTML <audio> tag.

angular.module('myApp', []) 
 
    .directive('myAudio', function() { 
 
    return { 
 
     restrict: 'E', 
 
     link: function(scope, element, attr) {    
 
     
 
     // Using html <audio> tag with controlls 
 
     var player = element.find('audio')[0]; 
 
     
 
     var elm = element[0], 
 
      byClass = function(klass) { 
 
      return angular.element(elm.getElementsByClassName(klass)); 
 
      }; 
 

 
     byClass('play') 
 
      .on('click', function() { 
 

 
      player.play(); 
 

 
      }); 
 
     byClass('pause') 
 
      .on('click', function() { 
 
      player.pause(); 
 
      }); 
 
     } 
 
    }; 
 
    }); 
 

 
angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<my-audio> 
 
    <audio src="https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9" controls></audio> 
 
    <button class="play">Play Music</button> 
 
    <button class="pause">Pause Music</button> 
 
</my-audio> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>