Arul Arul - 1 year ago 79
AngularJS Question

HTML5 Audio Player using AngularJs through $http Service


<audio ng-src="{{vm.videourlsce}}" autoplay preload="auto" controls="controls" autobuffer></audio>

Inside my controller get the data from remover server using $http service and update to player

var vm = this;
vm.videourlsce = '';
vm.resources = response.resource;
vm.videourl = vm.resources.url;

console.log("Resources error");
$scope.$watch('vm.videourl', function(newVal, oldVal){
if (newVal !== undefined) {
console.log("Old Val => "+oldVal);
console.log("New Val => "+newVal);
vm.videourlsce = $sce.trustAsResourceUrl(newVal);

After getting service response, the audio URL bind to audio tag on src attribute and playing the audio. But the controls are not working. When I remove autoplay option from the audio tag, nothing will happen. Those controls are not working when clicking the play button.

When I hard-code this URL instead of getting from service it works fine. Does anyone help to this?

Answer Source

It could be an issue with browser incorrectly handling the change of audio source. Try this workaround.

<div data-ng-if="vm.videourlsce">
    <audio ng-src="{{ ::vm.videourlsce }}" autoplay preload="auto" controls="controls" autobuffer></audio>


After the OP has supplied the codepen it became clear the problem lies in ionic intercepting click and touch events. It is easily fixed by setting attribute data-tap-disabled="true" on a node.

<div data-ng-if="videourl" data-tap-disabled="true" class="item item-body no-padding">
    <audio autoplay preload="auto" controls="controls" autobuffer>
        <source src="{{ ::videourl }}" type="audio/mpeg"/>

Updated codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download