Build a simple music player using Vue and Electron

Electron is a popular desktop application development framework, while Vue is a popular JavaScript framework. Combining these two frameworks can create powerful desktop applications. In this article, I will introduce how to build a simple music player application using Vue and Electron.

Create a Vue project

First, we need to create a Vue project. Run the following command in the terminal:

vue create my-music-player

This will create a new Vue project.

Configure Electron

Create a file named main.js in the project root directory. This file will be our main Electron process. In this file we need to add the following code:

const {
    
     app, BrowserWindow } = require('electron')

function createWindow () {
    
    
  // 创建浏览器窗口
  const win = new BrowserWindow({
    
    
    width: 800,
    height: 600,
    webPreferences: {
    
    
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    }
  })

  // 加载应用的index.html
  win.loadFile('dist/index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
    
    
  createWindow()
})

// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
    
    
  if (process.platform !== 'darwin') {
    
    
    app.quit()
  }
})

This code will create a new Electron window and load the index.html file of our Vue project. We also enabled developer tools for easier debugging.

Create a music player component

Create a file named MusicPlayer.vue in the src/components directory. This file will be our music player component. In this component we need to add the following code:

<template>
  <div>
    <audio ref="audio" :src="currentTrack"></audio>
    <div>
      <button @click="play">Play</button>
      <button @click="pause">Pause</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      tracks: [
        {
          name: 'Track 1',
          file: '/tracks/track1.mp3'
        },
        {
          name: 'Track 2',
          file: '/tracks/track2.mp3'
        },
        {
          name: 'Track 3',
          file: '/tracks/track3.mp3'
        }
      ],
      currentTrackIndex: 0
    }
  },
  computed: {
    currentTrack() {
      return this.tracks[this.currentTrackIndex].file
    }
  },
  methods: {
    play() {
      this.$refs.audio.play()
    },
    pause() {
      this.$refs.audio.pause()
    },
    next() {
      this.currentTrackIndex++
      if (this.currentTrackIndex >= this.tracks.length) {
        this.currentTrackIndex = 0
      }
      this.$refs.audio.load()
      this.$refs.audio.play()
    }
  }
}
</script>

This code creates a music player containing three audio files. We can click buttons to play, pause and next song. This component uses the HTML5 audio element to play audio files.

Using the music player component in App.vue

Add the following code in src/App.vue:

<template>
  <div id="app">
    <MusicPlayer</div>
  </div>
</template>

<script>
import MusicPlayer from './components/MusicPlayer.vue'

export default {
  name: 'App',
  components: {
    MusicPlayer
  }
}
</script>

This code adds our music player component to the Vue application.

Build the application

Now, we can build our application. Run the following command in the terminal:

npm run build

This will generate a dist directory containing our application files.

Run application

Finally, we can run our application. Run the following command in the terminal:

npm run electron:serve

This will start the Electron application and display our Vue application.

Summarize:

In this article, we learned how to build a simple music player application using Vue and Electron. We created a Vue project and added the Electron configuration file. We also created a music player component for playing audio files. Finally, we added the music player component to our Vue application and got our application built and running. This simple music player example can help you understand how to combine Vue and Electron to build a powerful desktop application. If you want to extend this application, you can add more Vue components and Electron functionality and package it into a distributable application.

Build a simple music player using Vue and Electron

Guess you like