angular2 html 5 音頻播放器 ontimeupdate 事件

Question

我有一個集成了音頻播放器的簡單 Angular 應用程序。

<audio id="passage-audio" class="passage" controls ontimeupdate="document.getElementById('tracktime').value = this.currentTime ;">
    <source src="Luke.2.1-Luke.2.20.mp3" type="audio/mp3">
    <em class="error"><strong>Error:</strong> Your browser doesn't appear to support HTML5 Audio.</em>
</audio>

音頻播放器有一個名為“ontimeupdate”的事件，這將更新 html 元素中 ID 為“tracktime”的時間。 這工作正常。

我想做的是使用“ontimeupdate”來調用控制器中的函數。 現在它無法訪問該類。

<audio id="passage-audio" class="passage" controls (ontimeupdate)="updateTime()">...
</audio>

我有辦法做到這一點嗎？

如果我寫一個音頻指令，我可以訪問這個事件嗎？

謝謝

Answer 1

試試<audio ... (timeupdate)="updateTime()">

Answer 2

不確定你想要什么，但如果它是在每次更新時更新你的 angular 應用程序，你可以通過調用$scope.$apply()並傳遞一個 $scope 函數來完成這個。

Answer 3

這對我來說很好用

 function onChangeAudio(event) { var durration = event.srcElement.duration; alert("call") }

 <audio controls class="w-100" id="audio" (timeupdate)="onChangeAudio($event)"> <source src="..." type="audio/ogg"> <source src="..... " type="audio/mpeg"> Your browser does not support the audio element. </audio>