Vue と NetEase Cloud API を使用して複数の音楽再生モードを実装する方法

Vue と NetEase Cloud API を使用して複数の音楽再生モードを実装する方法

はじめに:
インターネットの急速な発展に伴い、音楽再生は私たちの生活に欠かせないものになりました。 NetEase Cloud Music プラットフォームには、開発者が使用できる豊富な音楽リソースと豊富な API があります。この記事では、Vue フレームワークと NetEase Cloud API を使用して複数の音楽再生モードを実装する方法を紹介します。

1. 準備
まず、NetEase Cloud Music Developer Platform で開発者アカウントを申請し、有効な API キーを取得する必要があります。次に、ネットワーク リクエストを送信するための axios ライブラリを Vue プロジェクトにインストールします。次のコマンドでインストールできます:

npm install axios

2. 音楽リストの取得
まず、ユーザーが再生するために選択する音楽リストを取得する必要があります。 NetEase Cloud API のプレイリスト詳細インターフェイスを使用して音楽リストを取得します。

methods: {
  async getMusicList() {
    try {
      const response = await axios.get('https://api.example.com/playlist/detail', {
        params: {
          id: '123456' // 此处填写你自己的歌单id
        }
      })

      this.musicList = response.data.playlist.tracks
    } catch (error) {
      console.log(error)
    }
  }
}

3. シングル ループの実現
シングル ループとは、プレイリスト内で曲が再生された後、その曲が自動的にループ再生されることを意味します。これは、Vue の計算プロパティを通じて実現できます。

computed: {
  currentSong() {
    return this.musicList[this.currentIndex]
  }
},
methods: {
  play() {
    // 播放当前歌曲
  },
  playNext() {
    this.currentIndex = (this.currentIndex + 1) % this.musicList.length
    this.play()
  }
}

4. シーケンシャル再生の実装
シーケンシャル再生とは、プレイリスト内の曲を追加された順に再生することを意味します。最後の曲が再生されたら、再生を停止します。 playNextメソッドに判定ロジックを追加できます。

methods: {
  playNext() {
    this.currentIndex += 1
    if (this.currentIndex < this.musicList.length) {
      this.play()
    } else {
      this.stop()
    }
  }
}

5. ランダム再生の実装
ランダム再生とは、プレイリスト内で再生する曲をランダムに選択することを意味します。各再生後に、リストからランダムな曲が選択されます。これを実現するには、Vue の計算プロパティと Math.random() メソッドを使用します。

computed: {
  randomIndex() {
    return Math.floor(Math.random() * this.musicList.length)
  },
  currentSong() {
    return this.musicList[this.randomIndex]
  }
},
methods: {
  playNext() {
    this.play()
  }
}

6. 再生モードを切り替える
最後に、再生モードを切り替えるボタンを追加します。ユーザーはボタンをクリックすることで、シングルループ、シーケンシャル再生、ランダム再生モードを切り替えることができます。

<template>
  <div>
    <button @click="changeMode">{{ mode }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mode: '单曲循环'，
      currentIndex: 0,
      musicList: []
    }
  },
  methods: {
    changeMode() {
      if (this.mode === '单曲循环') {
        this.mode = '顺序播放'
        this.playNext = this.playNextSequential
      } else if (this.mode === '顺序播放') {
        this.mode = '随机播放'
        this.playNext = this.playNextRandom
      } else if (this.mode === '随机播放') {
        this.mode = '单曲循环'
        this.playNext = this.playNextLoop
      }
    },
    playNextSequential() {
      this.currentIndex += 1
      if (this.currentIndex < this.musicList.length) {
        this.play()
      } else {
        this.stop()
      }
    },
    playNextRandom() {
      this.play()
    },
    playNextLoop() {
      this.currentIndex = (this.currentIndex + 1) % this.musicList.length
      this.play()
    }
  }
}
</script>

結論:
この記事の導入部を通じて、Vue フレームワークと NetEase Cloud API を使用して複数の音楽再生モードを実装する方法を学びました。シングルループ再生からシーケンシャル再生、ランダム再生まで、ユーザーのニーズに合わせて再生モードを柔軟に切り替え、より良い音楽体験を提供します。この記事があなたの勉強に役立つことを願っています!

以上がVue と NetEase Cloud API を使用して複数の音楽再生モードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。