html5 - angularjs play audio from a link from firebase -

i'm facing problem load html5 media player play audio (ogg) file link firebase.

here's view

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

here's directive

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}} comes firebase link, example:

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

the problem on how select elements class, according angular.element docs, .children() doesn't support selector, therefore have select them in different way.

for example:

var $playbtn = angular.element(element[0].getelementsbyclassname('play')); 

i've made example using static audio object exemplify:

angular.module('myapp', [])    .directive('myaudio', function() {      return {        restrict: 'e',        link: function(scope, element, attr) {            // using 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 example using html <audio> tag.

angular.module('myapp', [])    .directive('myaudio', function() {      return {        restrict: 'e',        link: function(scope, element, attr) {                                // using html <audio> tag 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>