如何使用Vue和网易云API实现多种音乐播放模式-猿码集

介绍

网易云音乐是一款非常流行的音乐APP，具有丰富而全面的音乐资源。网易云API是一个基于HTTP协议的API，可以使用它来获取音乐的各种信息，例如歌曲名、歌手、歌词、封面等等。使用Vue和网易云API，我们可以轻松地实现一个多种音乐播放模式的网站。

准备工作

安装Vue-cli

Vue-cli是Vue.js的脚手架工具，可以帮助快速搭建Vue.js项目。

npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev

申请网易云API

在使用网易云API之前，需要先到网易云官网申请一个API Key。

打开网易云音乐开放平台，登录后点击左上方的“控制台”按钮，创建一个应用。然后在“应用管理 -> 开发中心 -> API密钥管理”中获取API Key。

安装axios

axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。在Vue.js中，我们可以使用axios来请求网易云API。

npm install axios --save

实现多种音乐播放模式

模式一：单曲循环

单曲循环的播放模式，表示当一首歌曲播放完后，会重新开始播放这首歌曲。

首先，我们需要在Vue组件中定义一个变量来表示当前歌曲的播放模式：

data() {
  return {
    mode: 'single-loop'
  }
}

接下来，我们需要在Vue组件中定义一个方法来切换歌曲的播放模式：

methods: {
  toggleMode() {
    if (this.mode === 'single-loop') {
      this.mode = 'list-loop';
    } else if (this.mode === 'list-loop') {
      this.mode = 'random';
    } else if (this.mode === 'random') {
      this.mode = 'single-loop';
    }
  }
}

然后，在模板中添加一个按钮来切换歌曲的播放模式：

<button @click="toggleMode">切换播放模式</button>

模式二：列表循环

列表循环的播放模式，表示当播放到最后一首歌曲时，会从第一首歌曲开始播放。

在Vue组件中，我们可以通过监听audio标签的ended事件来切换下一首歌曲：

mounted() {
  this.$refs.audio.addEventListener('ended', () => {
    this.playNext();
  });
},
methods: {
  playNext() {
    const index = this.currentTrackIndex;
    const len = this.tracks.length;
    this.currentTrackIndex = (index + 1) % len;
  }
}

模式三：随机播放

随机播放的播放模式，表示每次播放的歌曲都是随机的。

在Vue组件中，我们可以使用Math.random()函数来获取一个0到1之间的随机数，然后根据随机数来播放下一首歌曲：

methods: {
  playRandom() {
    const index = this.currentTrackIndex;
    const len = this.tracks.length;
    let randomIndex = index;
    while (randomIndex === index) {
      randomIndex = Math.floor(Math.random() * len);
    }
    this.currentTrackIndex = randomIndex;
  }
}

然后，在模板中添加一个按钮来播放随机歌曲：

<button @click="playRandom">播放随机歌曲</button>

获取网易云API数据

在使用Vue实现多种音乐播放模式之前，我们需要先获取网易云API数据，包括歌曲名、歌手、歌词和封面等等。

安装jsonp

网易云API使用JSONP协议，所以我们需要安装jsonp来发送跨域请求。

npm install jsonp --save

获取音乐列表

我们可以使用axios发送一个GET请求，来获取音乐列表：

import axios from 'axios';
axios.get('/api/playlist/detail?id=3778678', {
  headers: {
    Referer: 'https://music.163.com/',
    Host: 'music.163.com'
  }
}).then(res => {
  const data = res.data;
});

在这个请求中，我们使用了一个反向代理，因为网易云音乐API不支持CORS跨域。通过设置Referer和Host请求头，就可以成功获取数据了。

获取歌曲信息

在获取音乐列表之后，我们可以获取对应歌曲的信息。

我们可以使用jsonp发送一个GET请求，来获取歌曲信息：

import jsonp from 'jsonp';
const url = `https://music.163.com/api/song/detail/?id=${id}&ids=[${id}]`;
jsonp(url, {
  param: 'jsonpCallback',
  prefix: 'playlistinfoCallback'
}, (err, data) => {
  if (err) {
    console.error(err.message);
    return;
  }
  // 歌曲名
  const name = data.songs[0].name;
  // 歌手
  const artist = data.songs[0].ar[0].name;
  // 专辑
  const album = data.songs[0].al.name;
  // 封面
  const picUrl = data.songs[0].al.picUrl;
});

获取歌曲歌词

在获取歌曲信息之后，我们可以获取对应歌曲的歌词。

我们可以使用jsonp发送一个GET请求，来获取歌曲歌词：

const url = `https://music.163.com/api/song/media?id=${id}`;
jsonp(url, {
  param: 'jsonpCallback',
  prefix: 'playlistinfoCallback'
}, (err, data) => {
  if (err) {
    console.error(err.message);
    return;
  }
  // 歌词
  const lyric = data.lyric;
});

总结

使用Vue和网易云API实现多种音乐播放模式，可以帮助我们更好地享受音乐。在Vue组件中，我们可以定义一个变量来表示当前歌曲的播放模式，然后通过定义一些方法来切换歌曲的播放模式。在获取网易云API数据方面，我们可以使用jsonp来发送跨域请求，然后获取对应的音乐信息、歌词和封面。

如何使用Vue和网易云API实现多种音乐播放模式

介绍