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

Kod di atas merangkumi dua permintaan API. Fungsi searchSongs menerima hujah kata kunci, memulakan permintaan carian dan mengembalikan data yang mengandungi hasil carian. Fungsi getSongUrl menerima parameter ID muzik dan mengembalikan alamat main balik muzik.

Seterusnya, kita boleh menggunakan API terkapsul ini dalam komponen Vue. Cipta fail komponen bernama Player.vue dan tulis kod berikut:

rrreee

Kod di atas mentakrifkan komponen pemain muzik mudah. Terdapat kotak input carian dan senarai muzik dalam komponen Pengguna boleh memasukkan kata kunci untuk mencari lagu dan klik pada item senarai untuk memainkannya. Pemain menggunakan teg <audio> HTML5 untuk melaksanakan fungsi main balik dengan mengikat atribut src pada URL muzik semasa. 🎜🎜Akhir sekali, daftarkan komponen ini dalam fail Vue utama anda (biasanya main.js): 🎜rrreee🎜Sekarang, jalankan projek Vue anda: 🎜rrreee🎜Buka http:// localhost:8080, anda akan melihat antara muka pemain muzik yang ringkas. Anda boleh memasukkan kata kunci lagu dalam kotak carian, dan hasil carian akan dipaparkan dalam senarai. Klik pada lagu dalam senarai untuk memainkan muzik menggunakan teg <audio> HTML5. 🎜🎜Ini hanyalah contoh mudah, anda boleh memanjangkan lagi pemain muzik ini mengikut keperluan anda. Contohnya, anda boleh menambah fungsi senarai main, paparan kulit muzik, dsb. untuk menjadikannya lebih lengkap. Pada masa yang sama, Muzik Awan NetEase menyediakan lebih banyak antara muka API untuk mendapatkan butiran lagu, lirik dan maklumat lain, yang boleh anda terokai dan cuba sendiri. 🎜🎜Untuk meringkaskan, artikel ini memperkenalkan cara mencipta pemain muzik ringkas menggunakan rangka kerja Vue dan API Awan NetEase. Melalui contoh kod mudah, fungsi asas mencari lagu dan memainkan muzik ditunjukkan. Saya harap artikel ini dapat membantu anda mula membangunkan pemain muzik anda sendiri menggunakan Vue dan NetEase Cloud API. 🎜

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!