Add an Audio Player with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a video player with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create audio-player

and select all the default options to create the project.

Create the Audio Player

We can create the audio player by writing:

<template>
  <input
    type="range"
    min="0"
    max="100"
    step="1"
    v-model="seekValue"
    @change="onSeek"
  />
  <audio
    src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
    ref="audioPlayer"
    @timeupdate="onPlaying"
  >
    Your browser does not support the
    <code>audio</code> element.
  </audio>
  <p>{{ currentTime }}</p>
  <div>
    <button @click="play">play</button>
    <button @click="pause">pause</button>
    <button @click="stop">stop</button>
    <button @click="setSpeed(0.5)">0.5x</button>
    <button @click="setSpeed(1)">1x</button>
    <button @click="setSpeed(1.5)">1.5x</button>
    <button @click="setSpeed(2)">2x</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      currentTime: 0,
      seekValue: 0,
    };
  },
  methods: {
    play() {
      this.$refs.audioPlayer.play();
    },
    pause() {
      this.$refs.audioPlayer.pause();
    },
    stop() {
      const { audioPlayer } = this.$refs;
      audioPlayer.pause();
      audioPlayer.currentTime = 0;
    },
    setSpeed(speed) {
      this.$refs.audioPlayer.playbackRate = speed;
    },
    onPlaying() {
      const { audioPlayer } = this.$refs;
      if (!audioPlayer) {
        return;
      }
      this.currentTime = audioPlayer.currentTime;
      this.seekValue = (audioPlayer.currentTime / audioPlayer.duration) * 100;
    },
    onSeek() {
      const { audioPlayer } = this.$refs;
      const seekto = audioPlayer.duration * (this.seekValue / 100);
      audioPlayer.currentTime = seekto;
    },
  },
};
</script>

We have a range input that we can slide around to change the seekValue ,

We bound it to seekValue with v-model .

Also, we attach a change event handler to the input that changes the currentTime of the audio element to seek the audio.

The audio element has the audio we want to play.

We listen to the timeUpdate event so we can get the current time.

We assign a ref to it so we can manipulate it later.

Below that, we display the currentTime .

And then we have a few buttons to let us play, pause, stop, and change the speed of the audio.

Below the template, we have the data method with the currentTime and seekValue reactive properties returned.

The play method gets the audio player element from the ref and call play to play the audio.

The pause method gets the audio player element from the ref and call pause to pause the audio.

The stop method pauses the audio and set the currentTime to 0 to reset the audio playback back to the beginning.

setSpeed lets us set the speed by changing the playbackRate property.

The onPlaying method is called when the timeUpdate event is emitted.

We set the this.currentTime reactive property to the currentTime property of the audioPlayer .

Also, we update the seekValue so that it’s in sync with the currentTime .

This will update the range slider to be in sync with the currentTime .

Finally, we have the onSeek method that’s run when the change event is emitted by the range input, which is done when we’re done moving the slider.

We get the seekValue reactive property and to compute the seekTo value by multiplying that by the duration and dividing by 100.

Then we set that to the currentTime to change the current time.

Conclusion

We can add an audio player with Vue 3 and JavaScript.