Show the current time of a track using VueJS

Question

Show the current time of a track using VueJS

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>

javascript vue.js nuxt.js

Answer 1

Answer №1

When working with the addEventListener method, you may notice that the context of this is not what you expected.

To solve this issue, one option is to use a fat arrow function.

sound.addEventListener('timeupdate', () => this.time = sound.currentTime.toFixed() )

Alternatively, you can stick to the traditional method by saving the value of this in another variable.

let that = this
sound.addEventListener('timeupdate', function () { that.time = sound.currentTime.toFixed() })

Answer 2

When working with the addEventListener method, you may notice that the context of this is not what you expected.

To solve this issue, one option is to use a fat arrow function.

sound.addEventListener('timeupdate', () => this.time = sound.currentTime.toFixed() )

Alternatively, you can stick to the traditional method by saving the value of this in another variable.

let that = this
sound.addEventListener('timeupdate', function () { that.time = sound.currentTime.toFixed() })

Answer 3

Answer №2

One way to dynamically add a generic timer is to utilize a watch function for adding and removing it:

(code example - untested)

export default {
    data() {
        return {
            isPlaying: false,
            time: 0,
            duration: 0,
            intervalId: null,
            sound: null
        };
    },
    watch: {
        isPlaying(isPlaying) {
            if (this.intervalId !== null) {
                clearInterval(this.intervalId);
            }
            if (isPlaying) {
                this.sound.play();
                this.intervalId = setInterval(() => {
                    this.time = this.sound.currentTime.toFixed();
                }, 500);
            } else {
                this.sound.stop();
            }
        }
    },
    methods: {
        playMusic() {
            if (!this.sound) {
                this.sound = new Audio(require("assets/YES.mp3"));
            }
            this.isPlaying = true;
        }
    }
};

Answer 4

One way to dynamically add a generic timer is to utilize a watch function for adding and removing it:

(code example - untested)

export default {
    data() {
        return {
            isPlaying: false,
            time: 0,
            duration: 0,
            intervalId: null,
            sound: null
        };
    },
    watch: {
        isPlaying(isPlaying) {
            if (this.intervalId !== null) {
                clearInterval(this.intervalId);
            }
            if (isPlaying) {
                this.sound.play();
                this.intervalId = setInterval(() => {
                    this.time = this.sound.currentTime.toFixed();
                }, 500);
            } else {
                this.sound.stop();
            }
        }
    },
    methods: {
        playMusic() {
            if (!this.sound) {
                this.sound = new Audio(require("assets/YES.mp3"));
            }
            this.isPlaying = true;
        }
    }
};

Answer 5

Answer №3

Looking to implement vue3 script setup?

<template>
  <audio :src="file.mp3" id="stream" autoplay></audio>
  <span>{{ currentTime }}</span>
</template>

<script setup>
import { onUpdated } from "vue";
const currentTime = ref();
onUpdated(() => {
  let audio = document.getElementById("stream");
  audio.addEventListener("timeupdate", function () {
    currentTime.value = audio.currentTime.toFixed();
  });
});
</script>

Answer 6

Looking to implement vue3 script setup?

<template>
  <audio :src="file.mp3" id="stream" autoplay></audio>
  <span>{{ currentTime }}</span>
</template>

<script setup>
import { onUpdated } from "vue";
const currentTime = ref();
onUpdated(() => {
  let audio = document.getElementById("stream");
  audio.addEventListener("timeupdate", function () {
    currentTime.value = audio.currentTime.toFixed();
  });
});
</script>

Show the current time of a track using VueJS

Answer №1

Answer №2

Answer №3

Similar questions

Refining the nodes and connections within a directed graph by implementing a filter triggered by clicking a button

Learn to leverage JavaScript in Node-RED to dynamically display messages based on selected dropdown options

Trying to add a single value to a specific index in a JavaScript array, but it is mistakenly assigning multiple values at once

Tips for accessing the initial element of an array, storing it in a state, and sending it to a component

Tips for fetching a response after sending an ajax request using XMLHttpRequest

Using Angular UI Router to Access $scope Beyond the Scope of the UI View

Incorporating CASL with the latest version of Angular, version

Can webpack integrate React components from a package and then recompile the package?

Can you tell me the locations of the src/js and build/js directories?

Showing data in json format using Angular

Where can I locate information on using the .get method?

In Node.js, the `res.send()` function is called before the actual functionality code is executed

What is the reason for the Express middleware using parenthesis syntax, whereas custom-made middleware does not?

Unable to successfully transfer parameters from AJAX to PHP

Adaptive Images with jQuery Mobile Listview

Asynchronous JavaScript function within a loop fails to refresh the document object model (DOM) despite

The global variable remains unchanged after the Ajax request is made

Tips for dynamically populating a mat-table dataSource

What are the steps to analyze all attributes of a Vue.js state object using the Chrome Devtools console?

Guide to customizing the Autocomplete jQuery plugin to mimic Google's result replacement feature