Comment créer un lecteur de musique à l'aide de l'API Vue et NetEase Cloud

Comment créer un lecteur de musique à l'aide de l'API Vue et NetEase Cloud

À l'ère numérique d'aujourd'hui, la musique est devenue un élément indispensable de la vie des gens. À mesure qu’Internet se développe, les services de streaming musical sont devenus de plus en plus populaires. NetEase Cloud Music est l'une des plateformes de streaming musical les plus populaires en Chine. Elle fournit une multitude de ressources musicales et dispose d'une API ouverte que les développeurs peuvent utiliser. Cet article explique comment utiliser le framework Vue et l'API NetEase Cloud pour créer un lecteur de musique simple.

Tout d'abord, nous devons créer un projet Vue. Ouvrez l'outil de ligne de commande et exécutez la commande suivante dans le répertoire approprié :

vue create music-player

Sélectionnez la configuration par défaut et attendez que le projet soit créé. Entrez dans le répertoire du projet et installez la bibliothèque Axios pour envoyer des requêtes HTTP :

cd music-player
npm install axios --Save

Ensuite, nous devons demander un compte développeur NetEase Cloud et obtenir la clé d'accès API. Accédez au site officiel de NetEase Cloud Music Open Platform, enregistrez un compte développeur et créez une application. La clé d'accès obtenue sera utilisée pour les requêtes API ultérieures.

Créez un fichier nommé api.js dans le projet pour encapsuler l'interaction avec l'API NetEase Cloud : api.js的文件，用于封装与网易云API的交互：

import axios from 'axios';

const API_BASE_URL = 'https://api.music.163.com';

export default {
  async searchSongs(keyword) {
    const response = await axios.get(
      `${API_BASE_URL}/search?keywords=${encodeURIComponent(keyword)}`
    );
    return response.data;
  },

  async getSongUrl(id) {
    const response = await axios.get(`${API_BASE_URL}/song/url?id=${id}`);
    return response.data;
  },
};

上述代码封装了两个API请求。searchSongs函数接收一个关键字参数，并发起搜索请求，返回包含搜索结果的数据。getSongUrl函数接收一个音乐ID参数，并返回该音乐的播放地址。

接下来，我们可以在Vue组件中使用这些封装好的API。创建一个名为Player.vue的组件文件，编写如下代码：

<template>
  <div class="player">
    <input type="text" v-model="searchKeyword" @keyup.enter="searchSongs" placeholder="搜索歌曲" />
    <ul>
      <li v-for="song in songs" :key="song.id" @click="playSong(song.id)">{{ song.name }}</li>
    </ul>
    <audio :src="currentSongUrl" controls autoplay></audio>
  </div>
</template>

<script>
import api from '@/api';

export default {
  data() {
    return {
      searchKeyword: '', // 搜索关键字
      songs: [], // 搜索结果
      currentSongUrl: '', // 当前播放音乐的URL
    };
  },

  methods: {
    async searchSongs() {
      const response = await api.searchSongs(this.searchKeyword);
      this.songs = response.result.songs;
    },

    async playSong(id) {
      const response = await api.getSongUrl(id);
      this.currentSongUrl = response.data[0].url;
    },
  },
};
</script>

<style scoped>
.player {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  cursor: pointer;
  margin-bottom: 10px;
}

audio {
  width: 100%;
  margin-top: 20px;
}
</style>

上述代码定义了一个简单的音乐播放器组件。组件中有一个搜索输入框和一个音乐列表，用户可以输入关键字搜索歌曲，并点击列表项进行播放。播放器使用HTML5的<audio>标签，通过绑定src属性为当前音乐的URL实现播放功能。

最后，在你的Vue主文件（通常是main.js）中注册这个组件：

import Vue from 'vue';
import App from './App.vue';
import Player from './Player.vue';

Vue.component('Player', Player);

new Vue({
  render: h => h(App),
}).$mount('#app');

现在，运行你的Vue项目：

npm run serve

在浏览器中打开http://localhost:8080，你将看到一个简单的音乐播放器界面。你可以在搜索框中输入歌曲关键字，搜索到的结果将会展示在列表中。点击列表中的歌曲，即可使用HTML5的<audio>rrreee

Le code ci-dessus encapsule deux requêtes API. La fonction searchSongs reçoit un argument de mot-clé, lance une demande de recherche et renvoie les données contenant les résultats de la recherche. La fonction getSongUrl reçoit un paramètre d'identification de musique et renvoie l'adresse de lecture de la musique.

Ensuite, nous pouvons utiliser ces API encapsulées dans les composants Vue. Créez un fichier de composant nommé Player.vue et écrivez le code suivant :

rrreee

Le code ci-dessus définit un simple composant de lecteur de musique. Il existe une zone de saisie de recherche et une liste de musique dans le composant. Les utilisateurs peuvent saisir des mots-clés pour rechercher des chansons et cliquer sur les éléments de la liste pour les lire. Le lecteur utilise la balise <audio> de HTML5 pour implémenter la fonction de lecture en liant l'attribut src à l'URL de la musique actuelle. 🎜🎜Enfin, enregistrez ce composant dans votre fichier Vue principal (généralement main.js) : 🎜rrreee🎜Maintenant, exécutez votre projet Vue : 🎜rrreee🎜Ouvrez http:// localhost:8080, vous verrez une interface simple de lecteur de musique. Vous pouvez saisir des mots-clés de chansons dans la zone de recherche et les résultats de la recherche seront affichés dans la liste. Cliquez sur une chanson dans la liste pour écouter la musique à l'aide de la balise <audio> de HTML5. 🎜🎜Ce n'est qu'un exemple simple, vous pouvez étendre davantage ce lecteur de musique en fonction de vos besoins. Par exemple, vous pouvez ajouter des fonctions de playlist, l'affichage des reprises musicales, etc. pour le rendre plus complet. Dans le même temps, NetEase Cloud Music fournit davantage d'interfaces API pour obtenir des détails sur les chansons, les paroles et d'autres informations, que vous pouvez explorer et essayer par vous-même. 🎜🎜Pour résumer, cet article explique comment créer un lecteur de musique simple à l'aide du framework Vue et de l'API NetEase Cloud. Grâce à des exemples de code simples, les fonctions de base de recherche de chansons et de lecture de musique sont démontrées. J'espère que cet article pourra vous aider à commencer à développer votre propre lecteur de musique à l'aide de l'API Vue et NetEase Cloud. 🎜

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!