手把手教你10分钟做一个单页面音乐播放器

网友投稿 821 2022-05-29

一.话不多，先看效果：

视频B站效果演示地址~

https://www.bilibili.com/video/BV12y4y1g71S

这是个单页面音乐播放器，只用到了 html+css 与很基础的vue语法，所以适合初学者，看一看10分钟就会了~

二.详细制作步骤（完整代码在最后）：

  • {{item.name}}
x x
热门评论：

  • {{item.user.nickname}}

    {{item.content}}

标签里的vue语法解释（先看后面的js部分再看这里更好理解）：

给这个标签 v-model='query’双向绑定数据query，@keyup.enter="searchMusic"绑定键盘回车事件，触发searMusic函数。

{{item.name}}

放内容，写在{{}}里。item相对于变量。

  • v-for="" 根据 musicList这个数组里元素的数量，动态生成多少个 li 。

    @click="playMusic(item.id)点击事件，触发playMusic(item.id)函数，并传参数。

    x

    :class="{playing:isPlay}，若isPlay值为真，playing这个选择器生效。

    歌曲主要调用的是网易云的公开API所得~

    new Vue({ el:"#container", data(){ return{ //搜索关键字 query:'', //歌曲列表 musicList:[], //当前歌曲地址 url:'', //海报地址 poster:'./img/timg4.jpg', //判断是否正在播放 isPlay: false, //评论 comment:[] } }, methods:{ searchMusic(){ // 判断搜索框有没有字 if(this.query==''){ //没有自己返回 return; } // 发送请求获得数据 axios({ url:'https://autumnfish.cn/search', method:'get', params:{ keywords:this.query } }).then(res=>{ //把获取数据传给musicList数组，可以通过 console.log(res);查看自己想要的数据 this.musicList = res.data.result.songs; }) }, playMusic(id){ //获得歌曲的url axios({ url:'https://autumnfish.cn/song/url', method:'get', params:{ id:id } }).then(res=>{ // 将当前歌曲地址设置为这个 this.url = res.data.data[0].url; }) //获取歌曲海豹 axios({ url:'https://autumnfish.cn/song/detail', method:'get', params:{ ids:id } }).then(res=>{ // 把图片地址纯存在poster数组 this.poster=res.data.songs[0].al.picUrl }) //获取评论 axios({ url:'https://autumnfish.cn/comment/hot', method:'get', params:{ type:0, id:id } }).then(res=>{ // 把评论的数据存在comment数组，包括头像，网名等等，可以通过 console.log(res);查看自己想要的数据 this.comment=res.data.hotComments }) }, // 歌曲是正在播放触发 play(){ this.isPlay = true; }, // 歌曲是停止触发 pause(){ this.isPlay = false; } } })

    三. 完整代码（需要素材与源文件的私信或在评论区留下邮箱，我发你呀）：

    music

    相关文章