CODEWITHSUNDEEP
angularjshtmlaudiohtml5-audio
Arul
Arul

Reputation: 1426

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?

Upvotes: 0

Views: 2284

Answers (1)

Dennis Baizulin
Dennis Baizulin

Reputation: 1420

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

Upvotes: 1

Related Questions