Construire un lecteur de musique moderne : la combinaison dorée de Vue et de l'API NetEase Cloud

Créer un lecteur de musique moderne : la combinaison dorée de Vue et de l'API NetEase Cloud

Introduction :
La musique joue un rôle important dans nos vies, et les lecteurs de musique modernes nous permettent d'écouter nos chansons préférées à tout moment et en tout lieu. Dans cet article, nous utiliserons Vue.js et l'API NetEase Cloud pour montrer comment créer un lecteur de musique moderne. Grâce à cet exemple, vous apprendrez à utiliser l'idée de composantisation de Vue.js ainsi que l'acquisition de données et l'interaction de l'API NetEase Cloud pour créer un lecteur de musique riche en fonctionnalités.

Pile technologique :
Avant de commencer, nous présenterons la pile technologique que nous utiliserons. Vue.js est un framework JavaScript populaire qui adopte l'idée de composantisation, nous permettant de créer facilement des interfaces utilisateur réutilisables et faciles à entretenir. L'API NetEase Cloud fournit une multitude de données musicales, notamment des chansons, des albums, des chanteurs et d'autres informations, ainsi que des fonctions de lecture et de contrôle de musique.

Préparation du projet :
Tout d'abord, nous devons créer un projet Vue. Vous pouvez utiliser Vue CLI pour créer un nouveau projet :

vue create music-player

Pendant le processus de création du projet, vous pouvez choisir différentes options de configuration selon vos besoins.

Ensuite, nous devons installer certains packages de dépendances nécessaires. Dans le terminal, passez au répertoire racine du projet et exécutez les commandes suivantes :

cd music-player
npm install axios vuex vuex-persist

• axios est utilisé pour envoyer des requêtes HTTP ;
• vuex est utilisé pour la gestion de l'état
• vuex-persist est utilisé pour maintenir l'état après ; rafraîchissement de la page.

Structure du projet :
Dans le répertoire racine du projet, nous pouvons voir la structure de répertoires suivante :

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

Parmi eux, le répertoire public stocke les ressources statiques, tandis que le répertoire src contient nos principaux fichiers de code.

Encapsulation API :
Créez d'abord le répertoire api et créez-y le fichier index.js. Dans ce fichier, nous encapsulerons la logique d'interaction avec l'API NetEase Cloud pour une utilisation dans d'autres composants. 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>

Conception des composants :

Player.vue :

Ce composant est responsable de la lecture et du contrôle de la musique.

Playlist.vue :

Ce composant est responsable de l'affichage de la playlist actuelle.

rrreee
• Ce sont deux exemples de composants de base. Dans des projets réels, vous pouvez ajouter plus de composants en fonction de vos besoins.
• Vuex State Management :
Dans le répertoire store, nous allons créer un fichier appelé index.js qui sera utilisé pour stocker et gérer l'état de l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!