VUE3 Getting Started Example: Building a Simple Music Player

VUE3 Getting Started Example: Building a Simple Music Player

Vue is a progressive framework for building user interfaces. It differs from other frameworks in that its core library only focuses on the view layer, making it easy to integrate it into other libraries or projects.

In this article, we will demonstrate how to build a simple music player using Vue3. This sample project will let us understand the basics of Vue3, including components, state management, and event handling.

let's start!

1. Install Vue3

First, we need to install Vue3. We can use npm or yarn to install Vue3.

If you use npm, you can enter the following command in the terminal:

npm install vue@next

If you use yarn, you can enter the following command in the terminal:

yarn add vue@next

2. Create A Vue instance

Before we start building the actual application, let’s create a basic Vue instance.

Add the following code in index.html:

<div id="app">
    {{ message }}
</div>

In this example, we simply output a message. Now, we need to create a Vue instance in app.js and append it to the above HTML tag:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

app.mount('#app')

This code creates a Vue instance and adds a message attribute to the instance using the data option. Next, we use the mount method to attach the instance to the div element with the id app in the HTML.

Open index.html in the browser, you should see the "Hello Vue!" message.

3. Create a music player component

Next, we will create a music player component. We'll use components to organize and reuse our code.

In app.js, we add the following code:

app.component('music-player', {
  template: `
    <div>
      <h2 id="title">{{ title }}</h2>
      <audio :src="song"></audio>
      <button v-if="!playing" @click="play">Play</button>
      <button v-if="playing" @click="pause">Pause</button>
    </div>
  `,
  data() {
    return {
      title: 'Never Gonna Give You Up',
      song: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
      playing: false
    }
  },
  methods: {
    play() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.play()
      this.playing = true
    },
    pause() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.pause()
      this.playing = false
    }
  }
})

This code creates a component called music-player. This component contains an audio element, two buttons and some responsive data.

In the template, we use the v-if directive to display different buttons based on the playing variable.

In the methods object, we define two methods, play and pause, which are used to control the playback and pause of audio.

4. Using the music player component in the Vue instance

Now that we have a music player component, we need to use it in the Vue instance.

Add the following code in app.js:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

app.component('music-player', {
  template: `
    <div>
      <h2 id="title">{{ title }}</h2>
      <audio :src="song"></audio>
      <button v-if="!playing" @click="play">Play</button>
      <button v-if="playing" @click="pause">Pause</button>
    </div>
  `,
  data() {
    return {
      title: 'Never Gonna Give You Up',
      song: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
      playing: false
    }
  },
  methods: {
    play() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.play()
      this.playing = true
    },
    pause() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.pause()
      this.playing = false
    }
  }
})

app.mount('#app')

In the Vue instance, we used the tag to add the music player component. We can also set the player's title and song file path as data properties of the Vue instance and pass them to the music-player component.

Open index.html and you should see the music player. Clicking the "Play" button will start playing the music, while clicking the "Pause" button will pause the music.

Conclusion

In this article, we built a simple music player using Vue3. We developed step by step and learned the basics of Vue3, including components, state management, and event handling.

A real application may require more complex logic and more components, but this example can be used as a starting point for Vue3. If you want to learn more about Vue3, please check out the Vue3 official documentation.

The above is the detailed content of VUE3 Getting Started Example: Building a Simple Music Player. For more information, please follow other related articles on the PHP Chinese website!