Membina pemain muzik moden: gabungan emas Vue dan NetEase Cloud API

Membina pemain muzik moden: gabungan emas Vue dan NetEase Cloud API

Pengenalan:
Muzik memainkan peranan penting dalam kehidupan kita, dan pemain muzik moden membolehkan kami mendengar lagu kegemaran kami pada bila-bila masa, di mana-mana sahaja. Dalam artikel ini, kami akan menggunakan API Awan Vue.js dan NetEase untuk menunjukkan cara membina pemain muzik moden. Melalui contoh ini, anda akan belajar cara menggunakan idea komponenisasi Vue.js dan pemerolehan data serta interaksi API Awan NetEase untuk membina pemain muzik yang kaya dengan ciri.

Timbunan Teknologi:
Sebelum bermula, kami akan memperkenalkan tindanan teknologi yang akan kami gunakan. Vue.js ialah rangka kerja JavaScript popular yang menggunakan idea pengkomponenan, membolehkan kami membina antara muka pengguna yang boleh digunakan semula dan mudah diselenggara dengan mudah. NetEase Cloud API menyediakan banyak data muzik, termasuk lagu, album, penyanyi dan maklumat lain, serta fungsi main balik dan kawalan muzik.

Persediaan projek:
Pertama, kita perlu membuat projek Vue. Anda boleh menggunakan Vue CLI untuk mencipta projek baharu:

vue create music-player

Semasa proses mencipta projek, anda boleh memilih pilihan konfigurasi yang berbeza mengikut keperluan anda.

Seterusnya, kita perlu memasang beberapa pakej pergantungan yang diperlukan. Dalam terminal, tukar ke direktori akar projek dan laksanakan arahan berikut:

cd music-player
npm install axios vuex vuex-persist

• axios digunakan untuk menghantar permintaan HTTP
• vuex digunakan untuk pengurusan negeri
• vuex-persist digunakan untuk mengekalkan keadaan selepas; muat semula halaman.

Struktur projek:
Dalam direktori akar projek, kita boleh melihat struktur direktori berikut:

├── public
│   ├── index.html
│   └── ...
└── src
    ├── api
    │   └── index.js
    ├── components
    │   ├── Player.vue
    │   ├── Playlist.vue
    │   └── ...
    ├── store
    │   ├── index.js
    │   └── ...
    └── App.vue

Antaranya, direktori awam menyimpan sumber statik, manakala direktori src mengandungi fail kod utama kami.

Encapsulation API:
Mula-mula buat direktori api dan buat fail index.js di dalamnya. Dalam fail ini, kami akan merangkum logik interaksi dengan NetEase Cloud API untuk digunakan dalam komponen lain. api目录，并在其中创建index.js文件。在该文件中，我们将封装与网易云API的交互逻辑，以便在其他组件中使用。

示例代码如下：

import axios from 'axios';

const BASE_URL = 'https://api.music.com';

const api = axios.create({
  baseURL: BASE_URL
});

export const getSongById = async (id) => {
  try {
    const response = await api.get('/song', { params: { id } });
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export const searchSongs = async (keyword) => {
  try {
    const response = await api.get('/search', { params: { keyword } });
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

// 更多API封装...

在上述代码中，我们使用axios库创建了一个与网易云API交互的实例。通过getSongById和searchSongs方法，我们可以分别根据歌曲ID和关键字来获取歌曲信息。

组件设计:
在components目录中，我们将创建几个核心组件，它们将构成我们的音乐播放器。

1. Player.vue:
   该组件负责播放与控制音乐。

<template>
  <div class="player">
    <!-- 播放/暂停按钮 -->
    <button @click="togglePlayback">{{ isPlaying ? '暂停' : '播放' }}</button>

    <!-- 歌曲封面 -->
    <img :src="currentSong.cover" alt="Song Cover" />

    <!-- 歌曲信息 -->
    <div class="song-info">
      <h2>{{ currentSong.name }}</h2>
      <p>{{ currentSong.artist }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['currentSong', 'isPlaying'])
  },
  methods: {
    ...mapActions(['togglePlayback'])
  }
};
</script>

2. Playlist.vue:
   该组件负责展示当前播放列表。

<template>
  <ul class="playlist">
    <li v-for="song in playlist" :key="song.id">
      <p>{{ song.name }}</p>
      <p>{{ song.artist }}</p>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['playlist'])
  }
};
</script>

这是两个基本的组件示例，在实际项目中，你可以根据需求添加更多的组件。

Vuex状态管理:
在store目录中，我们将创建一个名为index.js的文件，该文件将用于存储和管理应用程序的状态。

示例代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentSong: null,
    playlist: [],
    isPlaying: false
  },
  mutations: {
    setCurrentSong(state, song) {
      state.currentSong = song;
    },
    setPlaylist(state, playlist) {
      state.playlist = playlist;
    },
    togglePlayback(state) {
      state.isPlaying = !state.isPlaying;
    }
  },
  plugins: [createPersistedState()]
});

在这里，我们定义了一个状态树，其中包括当前播放的歌曲、播放列表和播放状态。通过setCurrentSong、setPlaylist和togglePlayback等mutations方法，我们可以更新状态。

应用入口:
最后，我们需要在主文件App.vue

<template>
  <div id="app">
    <Player />
    <Playlist />
  </div>
</template>

<script>
import Player from './components/Player.vue';
import Playlist from './components/Playlist.vue';

export default {
  components: {
    Player,
    Playlist
  }
};
</script>

Reka Bentuk Komponen:

Atas ialah kandungan terperinci Membina pemain muzik moden: gabungan emas Vue dan NetEase Cloud API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!