angularjs play audio from a link from firebase - angularjs

Question

I'm facing a problem to load a html5 media player to play audio (OGG) file from a link firebase.
Here's my 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 my 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 from a 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

Answer 1

The problem is on how you select the elements by class, according to angular.element docs, .children() doesn't support selector, therefore you have to select them in a different way.
For example:
var $playBtn = angular.element(element[0].getElementsByClassName('play'));
I've made an example using a static Audio object to exemplify:
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 example using 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>