【问题标题】：ng-model for html5 audio element in AngularJSAngularJS 中 html5 音频元素的 ng-model
【发布时间】：2014-12-23 12:27:58
【问题描述】：

知道如何将音频元素绑定到 ng 模型吗？

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

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

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

【问题讨论】：

简单的代码对我有用[作为答案发布][1] [1]：stackoverflow.com/questions/15485768/…

标签： angularjs angularjs-directive html5-audio angularjs-scope

【解决方案1】：

您可以通过为您的应用创建自定义指令来做到这一点。该指令将函数绑定到音频元素的 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;
}

【讨论】：

注意，我自己刚刚开始使用 Angular。请告诉我是否有更惯用的方法来处理这个问题。
我不知道什么是最惯用的，但这可以通过在控制器中定义一个 timeElapsed() 方法并从 html 引用它来更简单地完成。只要控制器在范围内，您就根本不需要 ng-model。

【解决方案2】：

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

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

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

【讨论】：