Créez un lecteur de musique simple en utilisant Vue et Electron

Electron est un framework de développement d'applications de bureau populaire, tandis que Vue est un framework JavaScript populaire. La combinaison de ces deux frameworks peut créer de puissantes applications de bureau. Dans cet article, je vais vous présenter comment créer une application de lecteur de musique simple à l'aide de Vue et Electron.

1. Créer un projet Vue

Tout d’abord, nous devons créer un projet Vue. Exécutez la commande suivante dans le terminal :

vue create my-music-player

Cela créera un nouveau projet Vue.

2. Configurer l'électron

Créez un fichier nommé main.js dans le répertoire racine du projet. Ce fichier sera notre principal processus Electron. Dans ce fichier, nous devons ajouter le code suivant :

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()
  }
})

Ce code créera une nouvelle fenêtre Electron et chargera le fichier index.html de notre projet Vue. Nous avons également activé les outils de développement pour un débogage plus facile.

3. Créer un composant de lecteur de musique

Créez un fichier nommé MusicPlayer.vue dans le répertoire src/components. Ce fichier sera notre composant lecteur de musique. Dans ce composant, nous devons ajouter le code suivant :

<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>

Ce code crée un lecteur de musique contenant trois fichiers audio. Nous pouvons cliquer sur les boutons pour lire, mettre en pause et la chanson suivante. Ce composant utilise l'élément audio HTML5 pour lire des fichiers audio.

4. Utilisation du composant lecteur de musique dans App.vue

Ajoutez le code suivant dans 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>

Ce code ajoute notre composant lecteur de musique à l'application Vue.

5. Construire l'application

Maintenant, nous pouvons créer notre application. Exécutez la commande suivante dans le terminal :

npm run build

Cela générera un répertoire dist contenant nos fichiers d'application.

6. Exécuter l'application

Enfin, nous pouvons exécuter notre application. Exécutez la commande suivante dans le terminal :

npm run electron:serve

Cela démarrera l'application Electron et affichera notre application Vue.

Résumer:

Dans cet article, nous avons appris à créer une application de lecteur de musique simple à l'aide de Vue et Electron. Nous avons créé un projet Vue et ajouté le fichier de configuration Electron. Nous avons également créé un composant lecteur de musique pour lire des fichiers audio. Enfin, nous avons ajouté le composant lecteur de musique à notre application Vue et construit et exécuté notre application. Cet exemple simple de lecteur de musique peut vous aider à comprendre comment combiner Vue et Electron pour créer une application de bureau puissante. Si vous souhaitez étendre cette application, vous pouvez ajouter davantage de composants Vue et de fonctionnalités Electron et les regrouper dans une application distribuable.