Vue と NetEase Cloud API を使用して音楽プレーヤーを作成する方法

Vue と NetEase Cloud API を使用して音楽プレーヤーを作成する方法

今日のデジタル時代において、音楽は人々の生活に欠かせない一部となっています。インターネットの成長に伴い、音楽ストリーミング サービスの人気が高まっています。 NetEase Cloud Music は、中国で最も人気のあるストリーミング音楽プラットフォームの 1 つで、豊富な音楽リソースを提供し、開発者が使用できるオープン API を備えています。この記事では、Vue フレームワークと NetEase Cloud API を使用してシンプルな音楽プレーヤーを作成する方法を紹介します。

まず、Vue プロジェクトを作成する必要があります。コマンド ライン ツールを開き、適切なディレクトリで次のコマンドを実行します。

vue create music-player

デフォルトの構成を選択し、プロジェクトが作成されるまで待ちます。プロジェクト ディレクトリに入り、HTTP リクエストを送信するための Axios ライブラリをインストールします。

cd music-player
npm install axios --Save

次に、NetEase Cloud 開発者アカウントを申請し、API アクセス キーを取得する必要があります。 NetEase Cloud Music Open Platform の公式 Web サイトにアクセスし、開発者アカウントを登録してアプリケーションを作成します。取得したアクセスキーは後続の API リクエストに使用されます。

プロジェクト内に api.js という名前のファイルを作成し、NetEase Cloud 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;
  },
};

上記のコードは 2 つの API リクエストをカプセル化します。 searchSongs関数はキーワード パラメーターを受け取り、検索リクエストを開始し、検索結果を含むデータを返します。 getSongUrl関数は音楽 ID パラメータを受け取り、音楽の再生アドレスを返します。

次に、これらのカプセル化された API を Vue コンポーネントで使用できます。 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> タグを使用して音楽が再生されます。

これは単なる単純な例であり、ニーズに応じてこの音楽プレーヤーをさらに拡張できます。例えば、プレイリスト機能や楽曲のカバー表示などを追加して、より充実したものにすることができます。同時に、NetEase Cloud Music は、曲の詳細、歌詞、その他の情報を取得するための API インターフェイスをさらに提供しており、これらを自分で調べて試すことができます。

要約すると、この記事では、Vue フレームワークと NetEase Cloud API を使用してシンプルな音楽プレーヤーを作成する方法を紹介します。簡単なコード例を通じて、曲の検索と音楽の再生の基本機能を示します。この記事が、Vue と NetEase Cloud API を使用して独自の音楽プレーヤーの開発を始めるのに役立つことを願っています。

以上がVue と NetEase Cloud API を使用して音楽プレーヤーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。