JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<body ng-app="audio" ng-controller="TestAudioCtrl">
    <audio controls my-audio>
        <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type='audio/ogg;codecs="vorbis"'></source>
    </audio>
    <div>Elapsed: {{timeElapsed}}</div>
    <p><small>Audio sample from <a target="_blank" href="http://commons.wikimedia.org/wiki/File:Example.ogg">Wikipedia</a>.  If I'm violating a license or ToC by using it here, please comment on the related StackOverflow <a target="_blank" href="http://stackoverflow.com/questions/17257435/ng-model-for-html5-audio-element-in-angularjs">post</a></small></p>
</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;
}