How to import music into vue

In modern web development, Vue has become one of the most popular front-end frameworks. If you are building a Vue application and want to add music files, this article will show you how to import music files into a Vue project.

Step 1: Add music files to the Vue project

In the Vue project, you need to add music files to any of the following directories: public, src/assets. Note that if you add a music file to the public directory, the file will be copied to the dist directory at build time.

Step Two: Access Music Files from JavaScript Files

To access music files in a Vue application, you need to add some JavaScript code. In the Vue component, you can use code like this to access the music file:

new Audio(require('@/assets/soundtrack.mp3')).play()

Here, we use a new Audio object and pass it the URL path of the music file (note: the file path should starts with @/assets/). Finally, we play the music by calling the play() method.

Step 3: Play music in Vue component

To play music in Vue component, you can use the above code in the mounted() life cycle method:

mounted() {
  new Audio(require('@/assets/soundtrack.mp3')).play()
}

Here, when the Vue component is mounted on the DOM tree, we initialize a new Audio object and play the music file.

Step 4: Control music playback in the Vue component

If you want to add more control options for music playback, such as pausing, stopping, adjusting volume, etc., please use the following code:

data() {
  return {
    audio: null,
    volume: 0.5,
    isPlaying: false
  }
},
mounted() {
  this.audio = new Audio(require('@/assets/soundtrack.mp3'))
  this.audio.volume = this.volume
},
methods: {
  togglePlay() {
    if (this.isPlaying) {
      this.audio.pause()
    } else {
      this.audio.play()
    }
    this.isPlaying = !this.isPlaying
  },
  stop() {
    this.audio.pause()
    this.audio.currentTime = 0
    this.isPlaying = false
  }
}

Here, we define a data attribute called 'audio' that tracks audio files. We also define methods togglePlay() and stop() for controlling audio files. In the togglePlay() method we check if the audio is playing and play or pause the audio as needed. In the stop() method, we stop the audio and set its current time to 0.

Finally, we hope you can successfully add music and control it in your Vue project. Remember, this is just a little trick within the Vue framework, you can use other libraries and frameworks such as jQuery and React to achieve the same results.

The above is the detailed content of How to import music into vue. For more information, please follow other related articles on the PHP Chinese website!