HTML5 通过 $http 服务使用 AngularJs 的音频播放器

Question

HTML 查看

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

在我的控制器中使用 $http 服务从移除服务器获取数据并更新到播放器

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);  
   }
});

获得服务响应后，音频 URL 绑定到 src 属性上的音频标签并播放音频。但是控件不起作用。当我从音频标签中删除自动播放选项时，什么也不会发生。单击播放按钮时，这些控件不起作用。

当我对此 URL 进行硬编码而不是从服务中获取时，它工作正常。有人帮忙吗？

Answer 1

这可能是浏览器未正确处理 audio 源更改的问题。试试这个解决方法。

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

更新

在 OP 提供 codepen 之后，很明显问题出在 ionic 拦截点击和触摸事件上。通过在节点上设置属性 data-tap-disabled="true" 可以很容易地修复它。

<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

HTML5 通过 $http 服务使用 AngularJs 的音频播放器

HTML5 Audio Player using AngularJs through $http Service

html

audio

html5-audio

angularjs

更新