如何使用Vue和網易雲API建立音樂播放器-Vue.js-PHP中文網

如何使用Vue和網易雲API建立音樂播放器

WBOY

發布： 2023-07-19 21:57:21

原創

1692 人瀏覽過

如何使用Vue和網易雲API創建音樂播放器

在當今的數位時代，音樂已經成為人們生活中不可或缺的一部分。隨著網路的發展，音樂串流服務也變得越來越普及。網路易雲音樂是中國最受歡迎的串流音樂平台之一，它提供了豐富的音樂資源，並且有開放的API供開發者使用。本文將介紹如何使用Vue框架和網易雲API建立一個簡單的音樂播放器。

首先，我們需要建立一個Vue專案。開啟命令列工具，在適當的目錄下執行以下命令：

vue create music-player

登入後複製

選擇預設配置並等待專案建立完成。進入專案目錄，並安裝Axios庫，用於發送HTTP請求：

cd music-player
npm install axios --Save

登入後複製

接下來，我們需要申請一個網易雲開發者帳號，並取得到API的存取金鑰。到網易雲音樂開放平台官網，註冊一個開發者帳號並創建一個應用程式。取得到的存取金鑰將用於後續的API請求。

在專案中建立一個名為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專案：