Angular2 HTML 5音频播放器ontimeupdate事件

angular2 html 5 audio player ontimeupdate event

本文关键字：ontimeupdate 事件 播放器 音频 HTML Angular2      更新时间：2023-09-26

我有一个集成了音频播放器的简单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"的事件，它将在id为"tracktime"的HTML元素中更新时间。这很好。

我想做的是使用"ontimeupdate"来调用控制器中的函数。现在它还不能访问这个类。

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

我有办法做到这一点吗?

如果我写一个音频指令，我能访问这个事件吗?

谢谢

尝试<audio ... (timeupdate)="updateTime()">

不确定你想要什么，但如果你想在每次timeupdate时更新你的angular应用，你可以通过调用$scope.$apply()并传递一个$scope函数来实现。

这对我来说很好

function onChangeAudio(event) {
   var duration = 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>
相关文章：