手把手教你10分钟做一个音乐播放器 |
您所在的位置：网站首页 › 音乐调节播放器 › 手把手教你10分钟做一个音乐播放器 |
手把手教你10分钟做一个音乐播放器
|
一.话不多，先看效果：
视频B站效果演示地址~ （大佬勿入，大佬勿入，大佬勿入）这是个单页面音乐播放器，只用到了 html+css 与很基础的vue语法，所以适合初学者，看一看10分钟就会了~ 这个思路是借鉴黑马的~ 二.详细制作步骤（完整代码在最后）： 1.第一步当然是定义标签，对于每一个标签的作用注释都写得清清楚楚啦~： {{item.name}} 热门评论： {{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)函数，并传参数。 :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.先引入： 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> music *{ 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); } } {{item.name}} 热门评论： {{item.user.nickname}} {{item.content}} 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; } } }) 四.总结：这样子就完成了~ 再说一遍，需要素材与源文件的私信或在评论区留下你的邮箱，我发你呀，可以对比源码和文章注释学习~ 对了，夏目友人帐大家看了吗，又被治愈了~
文字烟雾效果 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总结笔记 …等等 进我主页看更多~ |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |