手把手教你10分钟做一个音乐播放器_你好呀，很高兴你在看这里~_如何制作音乐播放器

网络 02-07 586

一.话不多，先看效果：

视频B站效果演示地址~

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

这个思路是借鉴黑马的~

二.详细制作步骤（完整代码在最后）： 1.第一步当然是定义标签，对于每一个标签的作用注释都写得清清楚楚啦~：  <div class="container" id="container">  <div class="top">  <input type="text" class="txt" v-model='query' @keyup.enter="searchMusic"> </div>  <div class="list"> <ul>  <li v-for="(item,index) in musicList " :key="index"> <a href="javascript:;" @click="playMusic(item.id)"></a> {{item.name}} </li> </ul> </div>  <div class="middle">  <img src="img/player_bar.png" alt="x" class="bar" :class="{playing:isPlay}">  <img src="img/disc.png" alt="x" class="disk" :class="{turn:isPlay}">  <img :src="poster" class="poster"> </div>  <h5 class="commentTxt">热门评论：</h5> <div class="comment"> <ul>  <li v-for="(item,index) in comment" :key="index">  <img :src="item.user.avatarUrl" alt="" width="50px" height="50px">  <h3>{{item.user.nickname}}</h3>  <p> {{item.content}}</p> </li> </ul> </div>  <audio class="music" @play="play" @pause="pause" :src="url" controls autoplay loop></audio> </div>

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

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

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

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

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

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

:src="poster"地址的值为自己定义的变量poster。

后面都是相似的了，以此类推~

2.定义css部分，对一些不常见的属性都会解释~： 1.整体区域： /* 整体 */ .container{ width: 800px; height: 500px; background-color: rgba(248, 250, 252,0.3); border-radius: 10px; position: relative; overflow: hidden; }

border-radius: 10px; 角弧度 overflow: hidden;溢出隐藏

2.头部区域： /* 头部 */ .top{ position: absolute; top: 0; left: 0; width: 100%; height: 60px; border-radius: 10px 10px 0 0; background-image: linear-gradient(45deg,rgb(99, 202, 243),rgb(9, 253, 180),rgb(40, 106, 230)); z-index: 11; } .txt{ position: absolute; top: 15px; right: 50px; width: 200px; height: 30px; outline: none; border-radius: 15px; border: none; background-color: rgba(255, 255, 255,0.8); padding: 0 20px 0 20px; font-size: 13px; }

background-image: linear-gradient(45deg,rgb(99, 202, 243),rgb(9, 253, 180),rgb(40, 106, 230));渐变背景色。 z-index: 11; 显示的级别，就是防止被别的元素遮挡，越大越上 border: none; 取消边框

3. 歌曲列表部分： /* 歌曲列表 */ .list{ position: absolute; left: 0; top: 60px; width: 200px; height: 410px; background-color: rgba(255, 255, 255,0.5); } .list>ul{ position: absolute; width: 100%; height: 100%; overflow: auto; } .list>ul>li{ position: relative; width: 100%; height: 40px; line-height: 40px; font-family: 'fangsong'; font-size: 16px; margin-top: 1px; padding-left: 30px; background-color: rgba(255, 255, 255, 0.9); } .list>ul>li>a{ position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 20px; height: 20px; background-image: url(img/play.png); background-size: 100% 100%; }

overflow: auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 transform: translateY(-50%); 偏移，通常在定位50%后再偏移自身大小50%达到居中效果。

4. 中间部分： /* 中间部分 */ .middle{ position: absolute; left: 210px; top: 60px; width: 410px; height: 410px; } .disk{ position: absolute; width: 280px; height: 280px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateZ(0deg); } .bar{ position: absolute; top: -10px; left: 50%; z-index:10; transform-origin: 10px 10px; /* 10 -25 */ transform: rotateZ(-25deg); transition: all 1s; } .poster{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }

transform: translate(-50%,-50%) rotateZ(0deg); translate(-50%,-50%)表偏移， rotateZ(0deg)表旋转。 transform-origin: 10px 10px; 旋转点就是绕哪个点旋转。 transition: all 1s; 过渡效果。 object-fit: cover; 保持图片原有尺寸比例。但部分内容可能被剪切。

5.评论区： /* 评论 */ .comment{ position: absolute; top: 80px; right: -20px; height: 410px; width: 230px; overflow: auto; background-color: rgba(255, 255, 255,.4); border-top-left-radius: 15px; } .commentTxt{ position: absolute; top: 60px; right: 110px; width: 100px; height: 20px; line-height: 20px; font-size: 12px; color: rgb(0, 0, 0); } .comment>ul>li{ width: 210px; min-height: 50px; margin-top: 10px; font-size: 13px; padding: 5px; text-align:justify; } .comment>ul>li>img{ border-radius: 50%; display: inline-block; vertical-align: middle; } .comment>ul>li>h3{ display: inline-block; padding-left: 5px; } .comment>ul>li>p{ padding-top: 6px; display: block; text-indent: 2em; }

vertical-align: middle;该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 text-indent: 2em;将段落的第一行缩进xxx像素：

6. 播放器进度条部分： /* 进度条 */ .music{ position: absolute; bottom: 0px; left:0px; width: 800px; height: 34px; outline: none; background-color: rgb(241, 243, 244); } 7. 杆和唱片转动 /* 杆和唱片转动 */ .playing{ transform: rotateZ(10deg); } .turn{ animation:turn 3s linear infinite; } @keyframes turn{ 0%{ transform: translate(-50%,-50%) rotateZ(0deg); } 100%{ transform: translate(-50%,-50%) rotateZ(360deg); } } 3. js部分，用vue语法写 1.先引入：  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2.开始（详细请看注释）：

歌曲主要调用的是网易云的公开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; } } }) 三. 完整代码（需要素材与源文件的私信或在评论区留下邮箱，我发你呀）： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>music</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; } /* 背景图 */ .bj{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1000; } /* 整体 */ .container{ width: 800px; height: 500px; background-color: rgba(248, 250, 252,0.3); border-radius: 10px; position: relative; overflow: hidden; } /* 头部 */ .top{ position: absolute; top: 0; left: 0; width: 100%; height: 60px; border-radius: 10px 10px 0 0; background-image: linear-gradient(45deg,rgb(99, 202, 243),rgb(9, 253, 180),rgb(40, 106, 230)); z-index: 11; } .txt{ position: absolute; top: 15px; right: 50px; width: 200px; height: 30px; outline: none; border-radius: 15px; border: none; background-color: rgba(255, 255, 255,0.8); padding: 0 20px 0 20px; font-size: 13px; } /* 歌曲列表 */ .list{ position: absolute; left: 0; top: 60px; width: 200px; height: 410px; background-color: rgba(255, 255, 255,0.5); } .list>ul{ position: absolute; width: 100%; height: 100%; overflow: auto; } .list>ul>li{ position: relative; width: 100%; height: 40px; line-height: 40px; font-family: 'fangsong'; font-size: 16px; margin-top: 1px; padding-left: 30px; background-color: rgba(255, 255, 255, 0.9); } .list>ul>li>a{ position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 20px; height: 20px; background-image: url(img/play.png); background-size: 100% 100%; } /* 中间部分 */ .middle{ position: absolute; left: 210px; top: 60px; width: 410px; height: 410px; } .disk{ position: absolute; width: 280px; height: 280px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateZ(0deg); } .bar{ position: absolute; top: -10px; left: 50%; z-index:10; transform-origin: 10px 10px; /* 10 -25 */ transform: rotateZ(-25deg); transition: all 1s; } .poster{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 160px; height: 160px; border-radius: 50%; object-fit: cover; } /* 评论 */ .comment{ position: absolute; top: 80px; right: -20px; height: 410px; width: 230px; overflow: auto; background-color: rgba(255, 255, 255,.4); border-top-left-radius: 15px; } .commentTxt{ position: absolute; top: 60px; right: 110px; width: 100px; height: 20px; line-height: 20px; font-size: 12px; color: rgb(0, 0, 0); } .comment>ul>li{ width: 210px; min-height: 50px; margin-top: 10px; font-size: 13px; padding: 5px; text-align:justify; } .comment>ul>li>img{ border-radius: 50%; display: inline-block; vertical-align: middle; } .comment>ul>li>h3{ display: inline-block; padding-left: 5px; } .comment>ul>li>p{ padding-top: 6px; display: block; text-indent: 2em; } /* 进度条 */ .music{ position: absolute; bottom: 0px; left:0px; width: 800px; height: 34px; outline: none; background-color: rgb(241, 243, 244); } /* 杆和唱片转动 */ .playing{ transform: rotateZ(10deg); } .turn{ animation:turn 3s linear infinite; } @keyframes turn{ 0%{ transform: translate(-50%,-50%) rotateZ(0deg); } 100%{ transform: translate(-50%,-50%) rotateZ(360deg); } } </style> </head> <body> <video src="./video.mp4" class="bj" muted autoplay loop ></video> <div class="container" id="container">  <div class="top"> <input type="text" class="txt" v-model='query' @keyup.enter="searchMusic"> </div> <div class="list"> <ul> <li v-for="(item,index) in musicList " :key="index"> <a href="javascript:;" @click="playMusic(item.id)"></a> {{item.name}} </li> </ul> </div> <div class="middle">  <img src="img/player_bar.png" alt="x" class="bar" :class="{playing:isPlay}">  <img src="img/disc.png" alt="x" class="disk" :class="{turn:isPlay}">  <img :src="poster" class="poster"> </div> <h5 class="commentTxt">热门评论：</h5> <div class="comment"> <ul> <li v-for="(item,index) in comment" :key="index"> <img :src="item.user.avatarUrl" alt="" width="50px" height="50px"> <h3>{{item.user.nickname}}</h3> <p> {{item.content}}</p> </li> </ul> </div> <audio class="music" @play="play" @pause="pause" :src="url" controls autoplay loop></audio> </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> 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=>{ this.musicList = res.data.result.songs; }) }, playMusic(id){ 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=>{ this.poster=res.data.songs[0].al.picUrl }) axios({ url:'https://autumnfish.cn/comment/hot', method:'get', params:{ type:0, id:id } }).then(res=>{ this.comment=res.data.hotComments }) }, play(){ this.isPlay = true; }, pause(){ this.isPlay = false; } } }) </script> </body> </html> 四.总结：

这样子就完成了~ 再说一遍，需要素材与源文件的私信或在评论区留下你的邮箱，我发你呀，可以对比源码和文章注释学习~ 对了，夏目友人帐大家看了吗，又被治愈了~

其它：

文字烟雾效果 html+css+js 环绕倒影加载特效 html+css 气泡浮动背景特效 html+css 简约时钟特效 html+css+js 赛博朋克风格按钮 html+css 仿网易云官网轮播图 html+css+js 水波加载动画 html+css 导航栏滚动渐变效果 html+css+js 书本翻页 html+css 3D立体相册 html+css 霓虹灯绘画板效果 html+css+js 记一些css属性总结（一） Sass总结笔记 …等等进我主页看更多~