3

关于如何将音频元素绑定到 ng 模型的任何想法？

我想用音频元素的播放值更新 div？

<audio ng-model="myAudio">...</audio>
<div>{{myAudio.timeElapsed}}</div>

或类似的东西。知道怎么做吗？

4

2 回答 2

4

您可以通过为您的应用创建自定义指令来做到这一点。该指令将函数绑定到音频元素的 timeupdate 事件。绑定函数更新当前范围的 timeElapsed 属性并调用 $apply 将更改传播到视图。您可以在以下位置查看示例：

http://jsfiddle.net/ASjRP/20/

HTML

<body ng-app="audio" ng-controller="TestAudioCtrl">
    <audio controls my-audio>
        <source src="**YOUR SOURCE FILE**"></source>
    </audio>
    <div>Elapsed: {{timeElapsed}}</div>
</body>

Javascript

angular.module("audio", [])
    .directive("myAudio", function(){
        return function(scope, element, attrs){
            element.bind("timeupdate", function(){
                scope.timeElapsed = element[0].currentTime;
                scope.$apply();
            });
        }
    });

TestAudioCtrl = function($scope){
    $scope.timeElapsed = 0;
}
于 2013-07-12T21:48:05.963 回答
0

我强烈建议使用 HTML5 音频 API 来打造具有真正灵活性的强大播放器。我从头开始开发我的：

https://gist.github.com/djvs/24006c975ff11fd889e3

根据我的经验，HTML5 音频的标准浏览器控件通常很糟糕，并且当您尝试将它们绑定到诸如 ng-model 或源插值之类的东西时也经常中断......

于 2014-12-23T04:27:58.850 回答