HTML5 Audio Player using AngularJs through $http Service

Question

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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 18, 2016 at 19:52

Dennis Baizulin

1,4209 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arul Over a year ago

Audio is playing, but the controls(Play and pause) still not working in Firefox. At the same time, chrome seems good. Thanks for your contribution.

Arul Over a year ago

I've tried ogg format for firefox. That also won't help.

Dennis Baizulin Over a year ago

create a Fiddle complying with MVCE standarts

Arul Over a year ago

Thanks for your support. I've created codepen. I don't know why the controls(play/pause) not works on firefox. But this is my code.codepen.io/aruljayaraj/pen/YpNrgb

Dennis Baizulin Over a year ago

@Arul start with this step next time - it's much easier to help you when we have a working example. I've checked your codepen and found the problem, updating the answer.

Collectives™ on Stack Overflow

HTML5 Audio Player using AngularJs through $http Service

1 Answer 1

Update

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related