Arul Arul - 19 days ago 6
AngularJS Question

HTML5 Audio Player using AngularJs through $http Service

HTML View

<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 = '';
$http.get(SERVER.apiurl+"resources/get_resource/?id="+$stateParams.id)
.success(function(response){
vm.resources = response.resource;
vm.videourl = vm.resources.url;

}).error(function(error){
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

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

Update

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"/>
    </audio>
</div>

Updated codepen