Is there a way to have the time continuously update itself without needing to click on anything? When I press play, I want the seconds to automatically start updating from 0:00 until the end of the audio track. Currently, the time only updates when clicked. I am using HTML5 audio and so far I have been able to display the time as it updates with this line of code:
sound.ontimeupdate = function () { document.getElementById('Time').innerHTML = sound.currentTime.toFixed() }
However, this is not exactly what I need. I want the time attribute in data() to be updated and displayed in the label according to my HTML code.
I attempted to add an event listener but it didn't work. The function was called, and each call was logged with console.log, but the time attribute wasn't getting updated.
let sound = null
export default {
data () {
return {
isPlaying: false,
time: 0,
duration: 0
}
},
methods: {
playMusic () {
if (!sound) {
sound = new Audio(require('assets/YES.mp3'))
}
this.isPlaying = true
sound.play()
// sound.addEventListener('timeupdate', function () { this.time = sound.currentTime.toFixed() }) -- did not work
this.time = sound.currentTime.toFixed()
}
HTML:
<label id="Time" @timeupdate>
{{ time }}:{{ duration }}
</label>