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

Posted 2023-02-25

【中文标题】通过 $http 服务使用 AngularJs 的 HTML5 音频播放器

【英文标题】：HTML5 Audio Player using AngularJs through $http Service

【发布时间】：2016-11-18 13:44:40

【问题描述】：

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 进行硬编码而不是从服务中获取时，它可以正常工作。有人帮忙吗？

【参考方案1】：

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

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

---

更新

在 OP 提供 codepen 之后，很明显问题在于离子拦截点击和触摸事件。通过在节点上设置属性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

【讨论】：

音频正在播放，但控件（播放和暂停）在 Firefox 中仍然不起作用。同时，chrome看起来不错。感谢您的贡献。

我已经为 Firefox 尝试了 ogg 格式。这也无济于事。

创建一个符合MVCE standarts的小提琴

感谢您的支持。我已经创建了codepen。我不知道为什么控件（播放/暂停）在 Firefox 上不起作用。但这是我的代码。codepen.io/aruljayaraj/pen/YpNrgb

@Arul 下次从这一步开始 - 当我们有一个工作示例时，它会更容易帮助您。我检查了你的 codepen 并发现了问题，更新了答案。