博客

分享一下最近制作的网易云播放器，实现了一些最为简易的功能

播放音乐

播放mv

显示评价

首先需要配置网易云的api，需要本机安装
网易云音乐API链接
按照操作克隆本地，npm安装一下即可，非常简单

<template>
  <div>
    <h1>Player</h1>
    <input type="text" v-model="name" @keyup.enter="getSongs"></input><button @click="getSongs">搜索</button><br><br>
    <img v-if="isShowSong" v-bind:src="imageUrl" width="200px" height="200px" style="border-radius: 50%" :class="{'playing': isPlaying}">
    <video v-if="isShowMv" v-bind:src="mvUrl" controls autoplay width="400px" height="300px"></video>
    <br>
    <audio v-if="isShowSong" v-bind:src="url" controls autoplay @play="play" @pause="pause"></audio>
    <br>
    <div v-if="true">
      歌曲列表
      <ul>
        <li v-for="item in songList">
          {{item.name}}
          <button @click="getSing(item.id)">播放</button>
          <button @click="getMv(item.mvid)" v-if="item.mvid!==0">播放MV</button>
        </li>
      </ul>
    </div>
    <br>
    <div v-if="isShowSong || isShowMv">
      歌曲评论
      <ul>
        <li v-for="item in reviewList">
          {{item.user.nickname}}:{{item.content}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      songList: [],
      reviewList: [],
      url: '',
      imageUrl: '',
      isShowMv: false,
      isShowSong: false,
      isPlaying: false,
      mvUrl: '',
    }
  },
  methods: {
    // 获取歌曲列表
    getSongs() {
      let _this = this
      this.$axios.get("http://localhost:3000/search?keywords=" + this.name).then(res=>{
        console.log(res)
        _this.songList = res.data.result.songs;
      })
    },
    // 获取评论
    getReviews(id) {
      let _this = this
      this.$axios.get("http://localhost:3000/comment/hot?type=0&id=" + id).then(res=>{
        console.log(res)
        _this.reviewList = res.data.hotComments;
      })
    },
    // 获取单曲
    getSing(id) {
      let _this = this
      this.$axios.get("http://localhost:3000/song/url?id=" + id).then(res=>{
        console.log(res)
        _this.isShowSong = true
        _this.isShowMv = false
        _this.url = res.data.data[0].url
      })
      // 设置图片
      this.getImage(id)
      // 设置评论
      this.getReviews(id)
    },
    // 获取MV
    getMv(id) {
      let _this = this
      this.$axios.get("http://localhost:3000/mv/url?id=" + id).then(res=>{
        console.log(res)
        _this.isShowMv = true
        _this.isShowSong = false
        _this.mvUrl = res.data.data.url
      })
      // 设置评论
      this.getReviews(id)
    },
    // 获取图片
    getImage(id) {
      let _this = this
      this.$axios.get("http://localhost:3000/song/detail?ids=" + id).then(res=>{
        console.log(res)
        _this.imageUrl = res.data.songs[0].al.picUrl
      })
    },
    // 播放歌曲
    play() {
      this.isPlaying = true;
    },
    // 暂停歌曲
    pause() {
      this.isPlaying = false;
    },
  },
};
</script>

<style scoped>
/* 歌曲图片旋转 */
.playing {
  transform: rotate(360deg);
  animation: rotation 20s linear infinite;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>