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

Kod sampel adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan perpustakaan axios untuk mencipta tika yang berinteraksi dengan API Awan NetEase. Melalui kaedah getSongById dan searchSongs, kami boleh mendapatkan maklumat lagu berdasarkan ID lagu dan kata kunci masing-masing.

Reka Bentuk Komponen:

Dalam direktori komponen, kami akan mencipta beberapa komponen teras yang akan membentuk pemain muzik kami.

Player.vue:

Komponen ini bertanggungjawab untuk memainkan dan mengawal muzik.

rrreee

Playlist.vue:

Komponen ini bertanggungjawab untuk memaparkan senarai main semasa.

rrreee
• Ini adalah dua contoh komponen asas Dalam projek sebenar, anda boleh menambah lebih banyak komponen mengikut keperluan anda.
• Vuex State Management:
Dalam direktori store, kami akan mencipta fail yang dipanggil index.js, yang akan digunakan untuk menyimpan dan mengurus keadaan aplikasi .

🎜Kod sampel adalah seperti berikut: 🎜rrreee🎜Di sini, kami mentakrifkan pokok keadaan, yang termasuk lagu, senarai main dan status main balik yang sedang dimainkan. Kami boleh mengemas kini status melalui kaedah mutasi seperti setCurrentSong, setPlaylist dan togglePlayback. 🎜🎜Entri Permohonan:🎜Akhir sekali, kita perlu menulis pintu masuk aplikasi dalam fail utama App.vue. 🎜rrreee🎜Dalam kod di atas, kami memperkenalkan komponen Pemain dan Senarai Main ke dalam fail App.vue dan menggunakannya dalam templat. 🎜🎜Ringkasan:🎜Dengan menggunakan gabungan emas Vue.js dan NetEase Cloud API, kami berjaya membina pemain muzik moden. Dalam contoh ini, kami mempelajari cara merangkum permintaan API, mencipta komponen, menggunakan pengurusan keadaan dan teknologi asas yang lain. Sudah tentu, terdapat banyak cara contoh ini boleh dikembangkan, seperti menambah bar kemajuan main balik, fungsi penukaran lagu, dsb. 🎜🎜Melalui projek ini, saya harap ia dapat membantu anda memahami dengan lebih baik idea komponenisasi Vue.js dan kaedah menggunakan API pihak ketiga. Pada masa yang sama, anda juga digalakkan untuk mencuba lebih banyak fungsi dan inovasi dalam projek sebenar untuk membina pemain muzik yang unik. 🎜🎜Kod sampel penuh tersedia di GitHub. 🎜🎜Pautan rujukan:🎜🎜🎜Dokumentasi rasmi Vue: https://vuejs.org/🎜🎜Dokumentasi API Muzik Awan NetEase: https://github.com/Binaryify/NeteaseCloudMusicApi🎜🎜

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!