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

Question

HTML View

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

在我的 Controller 内部，使用 $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 绑定(bind)到 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