最新の音楽プレーヤーの構築: Vue と NetEase Cloud API の黄金の組み合わせ-Vue.js-php.cn

最新の音楽プレーヤーの構築: Vue と NetEase Cloud API の黄金の組み合わせ

王林

リリース： 2023-07-18 14:21:18

オリジナル

658 人が閲覧しました

最新の音楽プレーヤーの構築: Vue と NetEase Cloud API の黄金の組み合わせ

はじめに:
音楽は私たちの生活の中で重要な役割を果たしており、最新の音楽プレーヤーを使用すると、お気に入りの音楽を聴くことができます。どこでも歌。この記事では、Vue.js と NetEase Cloud API を使用して、最新の音楽プレーヤーを構築する方法を説明します。この例を通じて、Vue.js のコンポーネント化のアイデアと NetEase Cloud API のデータ取得と対話を使用して、機能豊富な音楽プレーヤーを構築する方法を学びます。

テクノロジースタック:
始める前に、使用するテクノロジースタックを紹介します。 Vue.js は、コンポーネント化の考え方を採用した人気の JavaScript フレームワークで、再利用可能で保守しやすいユーザーインターフェイスを簡単に構築できます。 NetEase Cloud API は、曲、アルバム、歌手、その他の情報を含む豊富な音楽データと、音楽の再生および制御機能を提供します。

プロジェクトの準備:
まず、Vue プロジェクトを作成する必要があります。 Vue CLI を使用して新しいプロジェクトを作成できます。

vue create music-player

ログイン後にコピー

プロジェクトの作成プロセス中に、必要に応じてさまざまな構成オプションを選択できます。

次に、必要な依存関係パッケージをインストールする必要があります。ターミナルでプロジェクトのルートディレクトリに切り替え、次のコマンドを実行します:

cd music-player
npm install axios vuex vuex-persist

ログイン後にコピー

axios は HTTP リクエストの送信に使用されます;
vuex は状態管理に使用されます;
vuex-persist は、ページの更新後に状態を保持するために使用されます。

プロジェクト構造:
プロジェクトのルートディレクトリには、次のディレクトリ構造が表示されます:

├── public
│   ├── index.html
│   └── ...
└── src
    ├── api
    │   └── index.js
    ├── components
    │   ├── Player.vue
    │   ├── Playlist.vue
    │   └── ...
    ├── store
    │   ├── index.js
    │   └── ...
    └── App.vue

ログイン後にコピー

このうち、public ディレクトリには静的リソースが格納され、src ディレクトリは中央はメインのコードファイルです。

API カプセル化:
まず、api ディレクトリを作成し、その中に index.js ファイルを作成します。このファイルでは、他のコンポーネントで使用できるように NetEase Cloud API との対話ロジックをカプセル化します。

サンプルコードは次のとおりです:

import axios from 'axios';

const BASE_URL = 'https://api.music.com';

const api = axios.create({
  baseURL: BASE_URL
});

export const getSongById = async (id) => {
  try {
    const response = await api.get('/song', { params: { id } });
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export const searchSongs = async (keyword) => {
  try {
    const response = await api.get('/search', { params: { keyword } });
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

// 更多API封装...

ログイン後にコピー

上記のコードでは、axios ライブラリを使用して、NetEase Cloud API と対話するインスタンスを作成します。 getSongById メソッドと searchSongs メソッドを使用すると、それぞれ曲 ID とキーワードに基づいて曲情報を取得できます。

コンポーネント設計:
components ディレクトリに、音楽プレーヤーを構成するいくつかのコアコンポーネントを作成します。

Player.vue:
このコンポーネントは、音楽の再生と制御を担当します。

<template>
  <div class="player">
    <!-- 播放/暂停按钮 -->
    <button @click="togglePlayback">{{ isPlaying ? '暂停' : '播放' }}</button>

    <!-- 歌曲封面 -->
    <img :src="currentSong.cover" alt="Song Cover" />

    <!-- 歌曲信息 -->
    <div class="song-info">
      <h2>{{ currentSong.name }}</h2>
      <p>{{ currentSong.artist }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['currentSong', 'isPlaying'])
  },
  methods: {
    ...mapActions(['togglePlayback'])
  }
};
</script>

ログイン後にコピー

Playlist.vue:
このコンポーネントは、現在のプレイリストを表示します。

<template>
  <ul class="playlist">
    <li v-for="song in playlist" :key="song.id">
      <p>{{ song.name }}</p>
      <p>{{ song.artist }}</p>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['playlist'])
  }
};
</script>

ログイン後にコピー

これらは 2 つの基本的なコンポーネントの例です。実際のプロジェクトでは、ニーズに応じてさらにコンポーネントを追加できます。

Vuex 状態管理:
store ディレクトリに、ストレージと管理に使用される index.js という名前のファイルを作成します。アプリケーションの。

サンプルコードは次のとおりです。

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentSong: null,
    playlist: [],
    isPlaying: false
  },
  mutations: {
    setCurrentSong(state, song) {
      state.currentSong = song;
    },
    setPlaylist(state, playlist) {
      state.playlist = playlist;
    },
    togglePlayback(state) {
      state.isPlaying = !state.isPlaying;
    }
  },
  plugins: [createPersistedState()]
});

ログイン後にコピー

ここでは、現在再生中の曲、プレイリスト、再生ステータスを含む状態ツリーを定義します。 setCurrentSong、setPlaylist、togglePlayback などのミューテーションメソッドを通じてステータスを更新できます。

アプリケーションの入り口:
最後に、メインファイル App.vue にアプリケーションの入り口を記述する必要があります。

<template>
  <div id="app">
    <Player />
    <Playlist />
  </div>
</template>

<script>
import Player from './components/Player.vue';
import Playlist from './components/Playlist.vue';

export default {
  components: {
    Player,
    Playlist
  }
};
</script>

ログイン後にコピー

上記のコードでは、Player コンポーネントと Playlist コンポーネントを App.vue ファイルに導入し、テンプレートで使用します。

概要:
Vue.js と NetEase Cloud API の黄金の組み合わせを使用することで、最新の音楽プレーヤーを構築することに成功しました。この例では、API リクエストのカプセル化、コンポーネントの作成、状態管理およびその他の基本テクノロジの使用方法を学びました。もちろん、この例は、再生プログレスバーの追加、曲の切り替え機能など、さまざまな方法で拡張できます。

このプロジェクトを通じて、Vue.js のコンポーネント化の考え方やサードパーティ API の使用方法をより深く理解していただければ幸いです。同時に、実際のプロジェクトでさらに多くの機能や革新性を試して、ユニークな音楽プレーヤーを構築することをお勧めします。

完全なサンプルコードは GitHub にあります。

参考リンク: