So erstellen Sie einen Musikplayer mit Vue und der NetEase Cloud API

So erstellen Sie einen Musikplayer mit Vue und der NetEase Cloud API

Im heutigen digitalen Zeitalter ist Musik zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Mit dem Wachstum des Internets erfreuen sich Musik-Streaming-Dienste immer größerer Beliebtheit. NetEase Cloud Music ist eine der beliebtesten Streaming-Musikplattformen in China. Sie bietet eine Fülle von Musikressourcen und verfügt über eine offene API, die Entwickler nutzen können. In diesem Artikel wird erläutert, wie Sie mit dem Vue-Framework und der NetEase Cloud-API einen einfachen Musikplayer erstellen.

Zuerst müssen wir ein Vue-Projekt erstellen. Öffnen Sie das Befehlszeilentool und führen Sie den folgenden Befehl im entsprechenden Verzeichnis aus:

vue create music-player

Wählen Sie die Standardkonfiguration aus und warten Sie, bis das Projekt erstellt wird. Geben Sie das Projektverzeichnis ein und installieren Sie die Axios-Bibliothek zum Senden von HTTP-Anfragen:

cd music-player
npm install axios --Save

Als nächstes müssen wir ein NetEase Cloud-Entwicklerkonto beantragen und den API-Zugriffsschlüssel erhalten. Gehen Sie zur offiziellen Website der NetEase Cloud Music Open Platform, registrieren Sie ein Entwicklerkonto und erstellen Sie eine Anwendung. Der erhaltene Zugriffsschlüssel wird für nachfolgende API-Anfragen verwendet.

Erstellen Sie im Projekt eine Datei mit dem Namen api.js, um die Interaktion mit der NetEase Cloud API zu kapseln: 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

Der obige Code kapselt zwei API-Anfragen. Die Funktion searchSongs empfängt ein Schlüsselwortargument, initiiert eine Suchanfrage und gibt Daten zurück, die die Suchergebnisse enthalten. Die Funktion getSongUrl empfängt einen Musik-ID-Parameter und gibt die Wiedergabeadresse der Musik zurück.

Als nächstes können wir diese gekapselten APIs in Vue-Komponenten verwenden. Erstellen Sie eine Komponentendatei mit dem Namen Player.vue und schreiben Sie den folgenden Code:

rrreee

Der obige Code definiert eine einfache Musik-Player-Komponente. In der Komponente gibt es ein Sucheingabefeld und eine Musikliste. Benutzer können Schlüsselwörter eingeben, um nach Liedern zu suchen, und auf die Listenelemente klicken, um sie abzuspielen. Der Player verwendet das <audio>-Tag von HTML5, um die Wiedergabefunktion zu implementieren, indem er das src-Attribut an die URL der aktuellen Musik bindet. 🎜🎜Schließlich registrieren Sie diese Komponente in Ihrer Haupt-Vue-Datei (normalerweise main.js): 🎜rrreee🎜Jetzt führen Sie Ihr Vue-Projekt aus: 🎜rrreee🎜Öffnen Sie http:// localhost:8080, Sie sehen eine einfache Musik-Player-Oberfläche. Sie können Liedschlüsselwörter in das Suchfeld eingeben und die Suchergebnisse werden in der Liste angezeigt. Klicken Sie auf ein Lied in der Liste, um die Musik mit dem HTML5-Tag <audio> abzuspielen. 🎜🎜Dies ist nur ein einfaches Beispiel. Sie können diesen Musikplayer entsprechend Ihren Anforderungen weiter erweitern. Sie können beispielsweise Playlist-Funktionen, die Anzeige von Musikcovern usw. hinzufügen, um es vollständiger zu machen. Gleichzeitig bietet NetEase Cloud Music mehr API-Schnittstellen, um Songdetails, Liedtexte und andere Informationen zu erhalten, die Sie selbst erkunden und ausprobieren können. 🎜🎜Zusammenfassend stellt dieser Artikel vor, wie man mit dem Vue-Framework und der NetEase Cloud API einen einfachen Musikplayer erstellt. Anhand einfacher Codebeispiele werden die Grundfunktionen der Songsuche und des Abspielens von Musik demonstriert. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, mit der Entwicklung Ihres eigenen Musikplayers mithilfe von Vue und der NetEase Cloud API zu beginnen. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Musikplayer mit Vue und der NetEase Cloud API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!