vue实现音乐播放器实战笔记

在本篇文章中，我们将通过使用Vue框架来实现一个音乐播放器，涉及到的知识点包括Vue基础、Vue组件、Vue路由和HTTP请求等。本篇文章将提供完整的实现代码和演示效果。

项目搭建

首先，我们需要通过Vue CLI来搭建Vue项目，在命令行中执行以下命令：

vue create music-player
cd music-player

接着，我们需要安装一些依赖组件以便实现音乐播放器的功能：

npm install axios vuex vue-router

其中，axios用于发送HTTP请求，vuex是Vue的状态管理工具，vue-router用来实现路由功能。

实现过程

设计播放器界面

我们首先需要设计播放器的界面，包括歌曲列表、播放器控制区域和进度条等。这里我们通过引入element-ui库来实现快速和美观的UI设计：

npm i element-ui -S

然后在Vue项目的入口文件src/main.js中引入element-ui的CSS样式以及组件库：

import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
new Vue({
    render: h => h(App),
}).$mount('#app')

接着，在src/App.vue中，我们可以使用element-ui组件来进行整个播放器的页面设计。这里我们只展示主要的音乐列表部分：

<template>
  <div class="app">
    <div class="music-list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="歌曲名" prop="name"></el-table-column>
        <el-table-column label="歌手" prop="singer"></el-table-column>
        <el-table-column label="时长" prop="duration" width="100"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-play" @click="play(scope.$index, scope.row)"></el-button>
            <el-button type="text" size="mini" icon="el-icon-download" @click="download(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

集成音乐API

接下来，我们需要集成一个音乐API，以便获取歌曲列表及歌曲的播放信息。这里我们使用NeteaseCloudMusicApi，一个基于Node.js的第三方网易云音乐API接口。

在命令行中执行以下命令，将NeteaseCloudMusicApi部署到本地服务器上：

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
npm install
npm run start

接着，我们需要在Vue项目中发起HTTP请求，获取音乐数据，这里我们借助axios组件进行异步请求：

export default {
  name: 'App',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getMusicList()
  },
  methods: {
    getMusicList() {
      axios.get('/api/playlist/detail?id=2687846840').then(res => {
        this.tableData = res.data.playlist.tracks.map((item, index) => {
          item.id = index
          item.duration = this.$moment(item.dt).format('mm:ss')
          item.url = `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`
          return item
        })
      })
    },
    // ...
  }
}

注意，这里的请求参数/api/playlist/detail?id=2687846840中的id是NeteaseCloudMusicApi中一个歌单的id，可以用来获取歌单中的歌曲列表。

集成音乐播放器

现在，我们已经能够获得音乐信息，接下来需要集成音乐播放器，以便能够播放音乐。

这里我们首先使用vuex来进行状态管理，即将音乐播放状态及播放模式保存在全局状态中。在src/store/index.js中，我们定义如下的全局音乐状态：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    isPlaying: false, // 是否正在播放
    playingId: 0, // 正在播放的歌曲id
    playMode: 0, // 播放模式(0:列表循环,1:单曲循环,2:随机播放)
    audio: new Audio(),
    audioCurrentTime: 0, // 当前播放进度（秒）
    audioDuration: 0, // 音乐总时长（秒）
    audioBufferedPercent: 0, // 缓存进度（百分比）
    playList: []
  },
  // ...
})

其中，audio是HTML5 Audio对象，用于播放音乐。接下来，我们需要使用Vue组件来完成在页面中展示音乐播放器。

在src/components/Player.vue中，我们通过audio组件及element-ui实现了音乐播放器的UI部分：

<template>
  <div class="player">
    <el-slider :percentage="audioBufferedPercent / 100" :tooltip-style="{backgroundColor: '#78cdec'}"></el-slider>
    <div class="operating-area">
      <el-button class="player-btn" icon="el-icon-skip-backward" size="mini" @click="prevMusic"></el-button>
      <el-button class="player-btn" v-if="isPlaying" icon="el-icon-pause" size="mini" @click="playPause"></el-button>
      <el-button class="player-btn" v-else icon="el-icon-play" size="mini" @click="playPause"></el-button>
      <el-button class="player-btn" icon="el-icon-skip-forward" size="mini" @click="nextMusic"></el-button>
    </div>
    <div class="player-info">
      <p class="music-name">{{ currentMusic.name }}</p>
      <p class="singer">{{ currentMusic.singer }}</p>
    </div>
    <el-slider v-model="audioCurrentTime" :max="audioDuration" :tooltip-style="{backgroundColor: '#78cdec'}"></el-slider>
  </div>
</template>

其中，用于展示音乐名和歌手的currentMusic对象定义如下：

computed: {
  currentMusic() {
    if (this.isPlaying && this.playingId >= 0) {
      return this.playList[this.playingId]
    } else {
      // 返回默认示例
      return {
        name: '未知曲目',
        singer: '未知歌手'
      }
    }
  }
}

接下来，我们需要在Player.vue组件中实现play、pause、nextMusic、prevMusic等方法，在这些方法中，我们使用audio对象来控制音乐的播放、暂停、下一首、上一首等操作。

// 播放或暂停音乐
playPause() {
  if (!this.isReady) return
  if (this.audio.paused) {
    this.audio.play()
    this.isPlaying = true
  } else {
    this.audio.pause()
    this.isPlaying = false
  }
},
// 播放下一曲
nextMusic() {
  if (!this.isReady) return
  if (this.playMode === 2) {
    // 随机播放
    this.playingId = Math.floor(Math.random() * this.playList.length)
  } else {
    // 循环播放(单曲循环和列表循环共用)
    this.playingId = (this.playingId + 1) % this.playList.length
  }
  this.audio.src = this.playList[this.playingId].url
  this.audio.play()
},
// 播放上一曲
prevMusic() {
  if (!this.isReady) return
  if (this.playMode === 2) {
    // 随机播放
    this.playingId = Math.floor(Math.random() * this.playList.length)
  } else {
    // 循环播放(单曲循环和列表循环共用)
    this.playingId = (this.playingId - 1 + this.playList.length) % this.playList.length
  }
  this.audio.src = this.playList[this.playingId].url
  this.audio.play()
},
// ...

集成音乐列表

最后，我们需要将音乐列表和音乐播放器融合在一起，以便实现完整的音乐播放器。

在src/App.vue中，我们引入Player.vue组件，并在音乐列表中添加el-button按钮，以便在点击按钮时自动播放对应的音乐：

<template>
  <div class="app">
    <div class="music-list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="歌曲名" prop="name"></el-table-column>
        <el-table-column label="歌手" prop="singer"></el-table-column>
        <el-table-column label="时长" prop="duration" width="100"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-play" @click="play(scope.$index, scope.row)"></el-button>
            <el-button type="text" size="mini" icon="el-icon-download" @click="download(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Player />
  </div>
</template>

在src/App.vue中，我们实现了play方法，用于在点击歌曲时播放对应的音乐：

methods: {
  getMusicList() {
    // ...
  },
  play(index, row) {
    this.playList = this.tableData
    this.playingId = index
    this.audio.src = row.url
    this.audio.play()
    this.isPlaying = true
  },
  // ...
}

总结

本文介绍了如何使用Vue框架来实现一个音乐播放器，从UI设计到API集成到音乐播放器的实现，完整覆盖了Vue开发过程中的多个关键步骤。希望读者通过本文可以更好地了解Vue框架的开发流程和应用场景。完整的示例代码可以在我的Github库中查看和下载。