CODEWITHSUNDEEP
javascripthtmlaudioangularhtml5-audio
harikrish
harikrish

Reputation: 2019

angular2 html 5 audio player ontimeupdate event

I have a simple angular application that has an audio player integrated. 

<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>

the audio player has an event called "ontimeupdate", this will update the time in the html element with the id "tracktime". This works fine.

What i would like to do is to use "ontimeupdate" to invoke a function in the controller. Right now it is not has access to the class. 

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

I there a way to accomplish this?

If i write an audio directive will i be able to access this event?

Thanks

Upvotes: 0

Views: 2625

Answers (3)

Aamir Hussain
Aamir Hussain

Reputation: 187

This is working fine for me

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>

Upvotes: 0

Carlos Mermingas
Carlos Mermingas

Reputation: 3892

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

Upvotes: 2

Klaassiek
Klaassiek

Reputation: 2906

Not sure what you want, but if it is to update you angular app at each timeupdate, you can accomplish this by calling $scope.$apply() and passing a $scope function.

Upvotes: 0

Related Questions