基于Electron-Vue开发的音乐播放器

2024-02-22 18:00:21

开发一个完整的 Electron-Vue 音乐播放器：使用网易云音乐 API

步骤一：创建项目

踏入音乐世界的第一步，让我们用 Electron-Vue CLI 创建一个项目：

vue-cli init electron-music-player --template electron-vue

步骤二：安装依赖

为我们的播放器注入动力，需要安装必要的依赖：

npm install

步骤三：开发界面

在 src/renderer/App.vue 中，构思出播放器的迷人界面。它可以是这样的：

<template>
  <div id="app">
    <!-- 播放器容器 -->
    <div class="player-container">
      <!-- 音频标签 -->
      <audio ref="audio" :src="currentSong.url"></audio>
      <!-- 播放控制 -->
      <div class="controls">
        <button @click="playOrPause">
          <i class="fa fa-play"></i>
          <i class="fa fa-pause"></i>
        </button>
        <button @click="previousSong">
          <i class="fa fa-step-backward"></i>
        </button>
        <button @click="nextSong">
          <i class="fa fa-step-forward"></i>
        </button>
      </div>
      <!-- 歌曲信息 -->
      <div class="song-info">
        <p>{{ currentSong.name }}</p>
        <p>{{ currentSong.artist }}</p>
      </div>
      <!-- 歌词 -->
      <div class="lyrics">
        <p v-html="lyrics"></p>
      </div>
    </div>
  </div>
</template>

<script>
// 导入响应式 API
import { ref } from 'vue'

export default {
  setup() {
    // 创建响应式变量
    const audio = ref(null)
    const currentSong = ref(null)
    const lyrics = ref(null)

    // 播放/暂停歌曲
    const playOrPause = () => {
      // 判断当前播放状态
      if (audio.value.paused) {
        // 播放歌曲
        audio.value.play()
      } else {
        // 暂停歌曲
        audio.value.pause()
      }
    }

    // 播放上一首歌曲
    const previousSong = () => {
      // ...
    }

    // 播放下一首歌曲
    const nextSong = () => {
      // ...
    }

    return {
      audio,
      currentSong,
      lyrics,
      playOrPause,
      previousSong,
      nextSong
    }
  }
}
</script>

<style>
/* ... */
</style>

步骤四：添加音乐播放功能

在 src/renderer/main.js 中，让音乐流动起来：

import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')

  win.webContents.on('did-finish-load', () => {
    // ...
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

步骤五：添加网易云音乐 API 功能

现在，让我们与网易云音乐 API 握手：

import { app, BrowserWindow } from 'electron'
import axios from 'axios'

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')

  win.webContents.on('did-finish-load', () => {
    // ...

    // 从网易云音乐 API 获取歌曲信息
    axios.get('https://api.netease.com/cloudmusic/song/detail?ids=347230')
      .then(res => {
        const song = res.data.songs[0]
        win.webContents.send('song-info', song)
      })
      .catch(err => {
        console.error(err)
      })
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})