Cara membuat pemain muzik menggunakan Vue dan NetEase Cloud API

Cara mencipta pemain muzik menggunakan Vue dan NetEase Cloud API

Dalam era digital hari ini, muzik telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Apabila Internet telah berkembang, perkhidmatan penstriman muzik telah menjadi semakin popular. NetEase Cloud Music ialah salah satu platform muzik penstriman yang paling popular di China Ia menyediakan banyak sumber muzik dan mempunyai API terbuka untuk digunakan oleh pembangun. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue dan NetEase Cloud API untuk mencipta pemain muzik ringkas.

Pertama, kita perlu mencipta projek Vue. Buka alat baris arahan dan laksanakan arahan berikut dalam direktori yang sesuai:

vue create music-player

Pilih konfigurasi lalai dan tunggu projek dibuat. Masukkan direktori projek dan pasang pustaka Axios untuk menghantar permintaan HTTP:

cd music-player
npm install axios --Save

Seterusnya, kami perlu memohon akaun pembangun NetEase Cloud dan mendapatkan kunci akses API. Pergi ke tapak web rasmi NetEase Cloud Music Open Platform, daftar akaun pembangun dan buat aplikasi. Kunci akses yang diperoleh akan digunakan untuk permintaan API berikutnya.

Buat fail bernama api.js dalam projek untuk merangkum interaksi dengan NetEase Cloud 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项目：

npm run serve

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

rrreee

Atas ialah kandungan terperinci Cara membuat pemain muzik menggunakan Vue dan NetEase Cloud API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!