vue音乐播放器

1.搜索歌曲

安装axios插件

main.js使用axios

这部分属于 搜索歌曲并展示

input 绑定search()方法 v-model双向绑定query 输入的关键字

  @keyup.enter 按下回车执行

<input 
        type="text"
        class="search"
        placeholder="搜索任意关键词"

        @keyup.enter="search()"
        v-model="query"
    />

data里

data(){
  return{
    query:"",
    songList: [],
  }
}

axios发送get请求 查询数据

 //查询关键词事件
  search(){
  this.$axios({
    method:"get",
    url: "https://autumnfish.cn/cloudsearch?keywords=" + this.query,
  }).then((res)=>{
    this.songList = res.data.result.songs;
    console.log( res.data.result.songs);
  });
},

1:歌曲搜索接口
	    请求地址:https://autumnfish.cn/cloudsearch
	    请求方法:get
	    请求参数:keywords(查询关键字)
	    响应内容:歌曲搜索结果

父组件app.vue传数据给子组件

  <songList :list="songList"></songList>

子组件SongList.vue 接收数据

//从父组件传数据到子组件
    props:["list"],

使用 渲染数据

  <li
    class="item"
    v-for="item in list" :key="item.id"
    >
    <a><img src="../images/play.png"/></a>
    <b> {{item.name}}</b>
    </li>

 2.播放选择的音乐

SongList.vue添加 点击事件 传id  ；添加点击时的样式

 @click="selectSong(item.id)"
 :class="{ select: currentId == item.id }"

selectSong(id){
        this.currentId = id;
        // 向父组件传递换歌事件带参数
        this.$emit("changeSong",id);
      }

App.vue @changeSong接收事件

        <songList :list="songList" @changeSong="changeSong1"></songList>

data添加  currentSongURL: ""，

底部播放控件绑定src 

 <audio
      preload="auto"
      controls
      autoplay
      loop
      class="myaudio"

      :src="currentSongURL"
    
    ></audio>

//切换歌曲事件
changeSong1(id){
  //请求歌曲资源
  this.$axios({
        method: "get",
        url: "https://autumnfish.cn/song/url?id=" + id,
      }).then((res) => {
        this.currentSongURL = res.data.data[0].url;
      });
},

2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址

3. 歌曲封面

data加上   isPlay: false,    CDCover: "",

myDisc组件绑定  v-bind 简写 : 

        <myDisc :cover="CDCover" :isPlay="isPlay"></myDisc>

子组件获取数据

props:["isPlay","cover"],

封面图片 如果不存在 默认 

<img src="../images/default.png" alt="" class="cover" v-show="!cover" />

<img :src="cover" alt="" class="cover" v-show="cover" />

App.vue中的changeSong1方法中 

//请求歌曲封面信息
  this.$axios
        .get("https://autumnfish.cn/song/detail?ids=" + id)
        .then((res) => {
          this.CDCover = res.data.songs[0].al.picUrl;
        });    

3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)

4. 获取热门评论

App.vue

data : commentList: [],

  //请求热门评论信息
  this.$axios
        .get("https://autumnfish.cn/comment/hot?type=0&id=" + id)
        .then((res) => {
          this.commentList = res.data.hotComments;
        });

4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
	

          <commentList :list="commentList"></commentList>

commentList.vue

 props: "list",

  <ul class="comment-list">
    热门留言
    <li class="comment" v-for="item in list" :key="item.id">
      <div class="left">
        <img :src="item.user.avatarUrl"  alt="" class="figure" />
      </div>

      <div class="right">
        <h5>{{item.user.nickname}}</h5>
        <p class="content">{{item.content}}</p>
      </div>
    </li>
  </ul>

5. 播放动画

播放控件 暂停/继续 改变播放状态

 <audio
      preload="auto"
      controls
      autoplay
      loop
      class="myaudio"
    
      :src="currentSongURL"
    
      @play="changePlay(true)"
      @pause="changePlay(false)"
    ></audio>

//查看播放状态
changePlay(b) {
      this.isPlay = b;
    },

子组件

 <div class="mydisc">
        <!-- 指针 -->
    <div class="point" :class="{ 'player-bar-move': isPlay }">
      <div class="player-bar"></div>
    </div>
    <!--黑胶背景 -->
    <div class="CD" :class="{ 'CD-animation': isPlay }">
      <img src="../images/disc.png" alt="" class="back" />

      <!-- 专辑封面 -->
      <img src="../images/default.png" alt="" class="cover" v-show="!cover" />
      <img :src="cover" alt="" class="cover" v-show="cover" />
    </div>
  </div>

// 指针原始位置
.player-bar {
    width: 92px;
    height: 128px;
    background-image: url('../images/player_bar.png');
    background-repeat: no-repeat;
}
// 指针播放时的位置
.player-bar-move {
    transform: rotateZ(0deg);
}

.CD {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 255px;
    height: 255px;
    transform: translate(-50%, -50%) rotateZ(0deg);
    text-align: center;
    line-height: 270px;
}

//旋转
.CD-animation {
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

 6. 播放mv

songList.vue 的mv图标 ps:参数为mv

    <span v-if="item.mv!=0" @click="playMV(item.mv)"><i></i></span>

 playMV(mv){
        this.$emit("playMV",mv);
      },

App.vue

data 

 // 遮罩层的显示状态
    isShow: false,
          // mv地址
          mvUrl: ""

 <songList :list="songList" @changeSong="changeSong1" @playMV="playMV1"></songList>

<div class="video_con" v-show="isShow" style="display: none;">
       
        <video :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMV()" ></div>
      </div>

//点击空白处隐藏mv
    closeMV(){
      this.isShow = false;
    }

//播放mv
playMV1(mv){
        this.isShow = true,
         //请求mv地址
       this.$axios
        .get("https://autumnfish.cn/mv/url?id=" + mv)
        .then((res) => {
          this.isShow = true;
          this.mvUrl = res.data.data.url;
          console.log(res.data.data.url)
        });
      },

5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址