播放器的编写（仿某易）一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。发

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

发现音乐

项目已经创建完毕

布局已经写好，路由和 Element-ui 已经整合完毕

项目跑起来 npm run serve

基础模板可点击此处下载（播放器布局）

发现音乐 | 轮播图

安装并导入 axios
在created生命周期函数中调用 轮播图接口
获取到数据并渲染到页面上

所有接口的请求方式都是get

说明 : 调用此接口 , 可获取 banner( 轮播图 ) 数据

接口地址：autumnfish.cn/banner

import axios from 'axios'
export default {
  name: 'discovery',
  data(){
    return {
      bannerList:[], //轮播图
      recomList:[], //推荐歌单
      newList:[], //最新音乐
      mvList:[], //推荐mv
    }
  },
  created() {
    //调用轮播图接口
    axios({
      url:'https://autumnfish.cn/banner',
      method:'get',
    }).then(res => {
      // console.log(res);
      this.bannerList = res.data.banners
    })
  }
};

发现音乐 | 推荐歌单

说明 : 调用此接口 , 可获取推荐歌单

可选参数 : limit: 获取数量 , 默认为 30 (不支持 offset)

接口地址 : autumnfish.cn/personalize…

在created生命周期函数中调用 推荐歌单接口
获取到数据并渲染到页面上

//调用推荐歌单接口
axios({
  url:'https://autumnfish.cn/personalized',
  params:{
    limit:15
  },
  method:'get',
}).then(res => {
  // console.log(res);
  this.recomList = res.data.result
})

发现音乐 | 最新音乐

说明 : 调用此接口 , 可获取最新音乐

接口地址 : autumnfish.cn/personalize…

//最新音乐接口
axios({
  url:'https://autumnfish.cn/personalized/newsong',
  method:'get'
}).then(res => {
  // console.log(res);
  this.newList = res.data.result
})

发现音乐 | 点击播放

播放歌曲

说明 : 调用此接口 , 传入音乐 id, 可获得歌曲播放地址

参数 : id: 音乐 id, 如 id=347230

接口地址 : autumnfish.cn/song/url

为播放按钮绑定点击事件

<span class="iconfont icon-play" @click="playMusic(item.id)"></span>

调用获取 播放音乐 接口
把获取到的播放地址，通过$parent传递给父组件(index.vue)

methods:{
    playMusic(id){
      // console.log(id)
      axios({
        url:'https://autumnfish.cn/song/url',
        method:'get',
        params:{
          id // k-v一致可简写
        }
      }).then(res => {
        // console.log(res)
        let url = res.data.data[0].url
        //设置父组件的播放地址
        this.$parent.musicUrl = url
      })
    }
  }

发现音乐 | 推荐MV

说明 : 调用此接口 , 可获取推荐 mv

接口地址 : autumnfish.cn/personalize…

//调用最新mv接口
axios({
  url:'https://autumnfish.cn/personalized/mv',
  method:'get'
}).then(res => {
  //console.log(res);
  this.mvList = res.data.result
})

播放歌曲

说明 : 调用此接口 , 传入音乐 id, 可获得歌曲播放地址

参数 : id: 音乐 id, 如 id=347230

接口地址 : autumnfish.cn/song/url

给播放图标绑定点击事件

<span class="iconfont icon-play" @click="playMusic(item.id)"></span>

编写播放歌曲的方法（调用播放歌曲接口，获取到歌曲url地址，通过this.$parent传递数据到index.vue页面，从而达到修改musicUrl的值）

//播放歌曲
playMusic(id){
  axios({
    url:'https://autumnfish.cn/song/url',
    method:'get',
    params:{
      id
    }
  }).then(res => {
    // console.log(res);
    let url = res.data.data[0].url
    this.$parent.musicUrl = url;
  })
}

搜索

组件名叫 result.vue
路由地址是：/result

页面跳转
歌曲搜索
歌单搜索
MV搜索

搜索 | 页面跳转

从顶部的搜索栏搜索跳转
携带数据去往搜索结果（/result）页
把搜索的关键字渲染到顶部

<!-- 搜索框 -->
<input
  type="text"
  autocomplete="off"
  placeholder="搜索"
  class="el-input__inner"
  v-model="inputValue"
  @keyup.enter="toSearch"
/>

export default {
  name: "top",
  data() {
    return {
      query: "",
      inputValue: "", // 输入的内容
    };
  },
  methods: {
    toSearch() {
      //如果为空，提示
      if (this.inputValue == "") {
        alert("请输入内容！");
      } else {
        //否则跳转
        // this.$router.push('/result')
        //携带数据
        // this.$router.push("/result?q="+this.inputValue)
        this.$router.push(`/result?q=${this.inputValue}`)
      }
    },
  },
};

// 在`result.vue`文件对应位置把携带过去的数据，渲染到页面即可：
// 注意这里参数名 可自行定义（保持一致即可）
<h2 class="title">{{$route.query.q}}</h2>

搜索|歌曲搜索

导入 axios
在 created 生命周期函数中调用搜索接口
默认先查询歌曲类型
把获取到的数据渲染到页面上，顶部的数量别忘了
mv图标和歌曲时长需要处理一下
这里没有单独的播放按钮，我们双击播放

<el-tab-pane label="歌曲" name="songs">
    <table class="el-table">
      <thead>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr
          class="el-table__row"
          v-for="(item, index) in songList"
          :key="index"
          @dblclick="playMusic(item.id)"
        >
          <td>{{ index + 1 }}</td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{ item.name }}</span>
                <!-- mv 图标 -->
                <span v-if="item.mvid != 0" class="iconfont icon-mv"></span>
              </div>
              <span></span>
              <!-- 二级标题 alias -->
              <span v-if="item.alias.length != 0">{{ item.alias[0]}}</span>
            </div>
          </td>
          <td>{{ item.artists[0].name }}</td>
          <td>{{ item.album.name }}</td>
          <td>{{ item.duration }}</td>
        </tr>
      </tbody>
    </table>
  </el-tab-pane>

<script>
//导入axios
import axios from "axios";
export default {
  name: "result",
  data() {
    return {
      activeIndex: "songs",
      // 保存 查询到的歌曲
      songList: [],
      //搜索结果的总数
      count: 0,
    };
  },
  created() {
    // console.log(this.$route.query.q);
    axios({
      url: "https://autumnfish.cn/search",
      method: "get",
      params: {
        keywords: this.$route.query.q,
        type: 1,
        limit: 10, // 获取的数据量
      },
    }).then((res) => {
      // console.log(res);
      this.songList = res.data.result.songs;
      //计算歌曲时间 转换为时分秒
      for (let i = 0; i < this.songList.length; i++) {
        let min = parseInt(this.songList[i].duration / 1000 / 60);
        let sec = parseInt((this.songList[i].duration / 1000) % 60);
        if (min < 10) {
          min = "0" + min;
        }
        if (sec < 10) {
          sec = "0" + sec;
        }
        // console.log(min+':'+sec);
        //设置给duration即可
        this.songList[i].duration = min + ":" + sec;
      }
      //保存总数
      this.count = res.data.result.songCount;
    });
  },
  methods: {
    playMusic(id) {
      // console.log(id);
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          id, // k-v一致可简写
        },
      }).then((res) => {
        // console.log(res)
        let url = res.data.data[0].url;
        //设置父组件的播放地址
        this.$parent.musicUrl = url;
      });
    },
  },
};
</script>

搜索 | 歌单搜索

在切换到歌单分类的时候，搜索对应的数据，这里使用 watch 实现
获取到数据并渲染到页面上,播放次数超过10W 特殊处理一下

<el-tab-pane label="歌单" name="lists">
    <div class="items">
      <div v-for="(item, index) in playlists" :key="index" class="item">
        <div class="img-wrap">
          <div class="num-wrap">
            播放量:
            <span class="num">{{item.playCount}}</span>
          </div>
          <img :src="item.coverImgUrl" alt="" />
          <span class="iconfont icon-play"></span>
        </div>
        <p class="name">{{item.name}}</p>
      </div>
    </div>
  </el-tab-pane>


<script>
//导入axios
import axios from "axios";
export default {
  name: "result",
  data() {
    return {
      //tab切换时 会改变的数据
      activeIndex: "songs",
      // 保存 查询到的歌曲
      songList: [],
      //搜索结果的总数
      count: 0,
      //保存歌单的字段
      playlists:[],
    };
  },
  
  //侦听器
  watch: {
    activeIndex() {
      //songs 歌曲
      //lists 歌单
      //mv    mv
      let type = 1;
      switch (this.activeIndex) {
        case 'songs':
          type = 1;
          break;
        case 'lists':
          type = 1000;
          break;
        case 'mv':
          type = 1004;
          break;
        default:
          break;
      }
      axios({
        url: "https://autumnfish.cn/search",
        method: "get",
        params: {
          keywords: this.$route.query.q,
          type: type, //简写为： type
          limit: 10, // 获取的数据量
        },
      }).then((res) => {
        console.log(res);
        if(type==1){
          this.songList = res.data.result.songs;
          //计算歌曲时间 转换为时分秒
          for (let i = 0; i < this.songList.length; i++) {
            let min = parseInt(this.songList[i].duration / 1000 / 60);
            let sec = parseInt((this.songList[i].duration / 1000) % 60);
            if (min < 10) {
              min = "0" + min;
            }
            if (sec < 10) {
              sec = "0" + sec;
            }
            // console.log(min+':'+sec);
            //设置给duration即可
            this.songList[i].duration = min + ":" + sec;
          }
        //保存总数
        this.count = res.data.result.songCount;
        }else if(type==1000){
          //歌单的逻辑
          this.playlists = res.data.result.playlists
          //总数
          this.count = res.data.result.playlistCount
          //播放次数 处理
          for (let i = 0; i < this.playlists.length; i++) {
            if(this.playlists[i].playCount>100000){
              this.playlists[i].playCount = parseInt(this.playlists[i].playCount/10000) + '万'
            }
          }
        }
      });
    },
  },
};
</script>

搜索 | MV搜索

在切换到MV分类的时候，搜索对应的数据，这里使用 watch 实现
为了页面布局美观，在获取MV时，个数可以稍微调整一下

<el-tab-pane label="MV" name="mv">
    <div class="items mv">
      <div v-for="(item, index) in mv" :key="index" class="item">
        <div class="img-wrap">
          <!-- 封面 -->
          <img :src="item.cover" alt="" />
          <span class="iconfont icon-play"></span>
          <div class="num-wrap">
            <div class="iconfont icon-play"></div>
            <!-- 播放次数 -->
            <div class="num">{{ item.playCount }}</div>
          </div>
          <!-- 持续时间 -->
          <span class="time">{{ item.duration }}</span>
        </div>
        <div class="info-wrap">
          <!-- mv名 -->
          <div class="name">{{ item.name }}</div>
          <!-- 歌手名 -->
          <div class="singer">{{ item.artistName }}</div>
        </div>
      </div>
    </div>
  </el-tab-pane>

//导入axios
import axios from "axios";
export default {
  name: "result",
  data() {
    return {
      //tab切换时 会改变的数据
      activeIndex: "songs",
      // 保存 查询到的歌曲
      songList: [],
      //搜索结果的总数
      count: 0,
      //保存歌单的字段
      playlists: [],
      //保存mv的字段
      mv: [],
    };
  },
  //回调函数
  created() {
    // console.log(this.$route.query.q);
    axios({
      url: "https://autumnfish.cn/search",
      method: "get",
      params: {
        keywords: this.$route.query.q,
        type: 1,
        limit: 10, // 获取的数据量
      },
    }).then((res) => {
      // console.log(res);
      this.songList = res.data.result.songs;
      //计算歌曲时间 转换为时分秒
      for (let i = 0; i < this.songList.length; i++) {
        let min = parseInt(this.songList[i].duration / 1000 / 60);
        let sec = parseInt((this.songList[i].duration / 1000) % 60);
        if (min < 10) {
          min = "0" + min;
        }
        if (sec < 10) {
          sec = "0" + sec;
        }
        // console.log(min+':'+sec);
        //设置给duration即可
        this.songList[i].duration = min + ":" + sec;
      }
      //保存总数
      this.count = res.data.result.songCount;
    });
  },
  //侦听器
  watch: {
    activeIndex() {
      //songs 歌曲
      //lists 歌单
      //mv    mv
      let type = 1;
      //获取个数
      let limit = 10;
      switch (this.activeIndex) {
        case "songs":
          type = 1;
          limit = 10;
          break;
        case "lists":
          type = 1000;
          limit = 10;
          break;
        case "mv":
          type = 1004;
          limit = 8;
          break;
        default:
          break;
      }
      axios({
        url: "https://autumnfish.cn/search",
        method: "get",
        params: {
          keywords: this.$route.query.q,
          type: type, //简写为： type
          //limit: 10, // 获取的数据量
          limit,
        },
      }).then((res) => {
        console.log(res);
        // 获取歌曲
        if (type == 1) {
          this.songList = res.data.result.songs;
          //计算歌曲时间 转换为时分秒
          for (let i = 0; i < this.songList.length; i++) {
            let min = parseInt(this.songList[i].duration / 1000 / 60);
            let sec = parseInt((this.songList[i].duration / 1000) % 60);
            if (min < 10) {
              min = "0" + min;
            }
            if (sec < 10) {
              sec = "0" + sec;
            }
            // console.log(min+':'+sec);
            //设置给duration即可
            this.songList[i].duration = min + ":" + sec;
          }
          //保存总数
          this.count = res.data.result.songCount;
        }
        // 获取歌单
        else if (type == 1000) {
          //歌单的逻辑
          this.playlists = res.data.result.playlists;
          //总数
          this.count = res.data.result.playlistCount;
          //播放次数 处理
          for (let i = 0; i < this.playlists.length; i++) {
            if (this.playlists[i].playCount > 100000) {
              this.playlists[i].playCount =
                parseInt(this.playlists[i].playCount / 10000) + "万";
            }
          }
        }
        else {
          //保存mv数据
          this.mv = res.data.result.mvs;
          //总数
          this.count = res.data.result.mvCount;
          //处理数据 播放次数 时间
          for (let i = 0; i < this.mv.length; i++) {
            //时间
            let min = parseInt(this.mv[i].duration/1000/60);
            let sec = parseInt(this.mv[i].duration/1000%60);
            if(min < 10){
              min = '0'+min
            }
            if(sec < 10){
              sec = '0'+sec
            }
            this.mv[i].duration = min + ":" + sec;
            //播放次数
            if (this.mv[i].playCount > 100000) {
              this.mv[i].playCount = parseInt(this.mv[i].playCount/10000) + '万';
            }
          }
        }
      });
    },
  },
};
</script>

播放器的编写（仿某易）

发现音乐

发现音乐 | 轮播图

发现音乐 | 推荐歌单

发现音乐 | 最新音乐

发现音乐 | 点击播放

播放歌曲

发现音乐 | 推荐MV

推荐歌单 | 分类切换

歌单列表 - 精品歌单

歌单列表 - 歌单列表

最新音乐 | 歌曲列表

最新音乐 | 分类切换

播放歌曲

最新MV|MV列表

全部MV

最新MV|分类切换

最新MV|数据分页

搜索

搜索 | 页面跳转

搜索|歌曲搜索

搜索 | 歌单搜索

搜索 | MV搜索