vue实现简洁带歌词显示的音乐播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:vue实现简洁带歌词显示的音乐播放器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <style> * { margin: 0px; padding: 0px; } body{background-color: #212121} .clearfix:after { display: block; clear: both; content: '' } .fl { float: left; } li { list-style: none; } h3 { font-weight: normal; } .main { width: 300px; height: 500px; background: url(//repo.bfw.wiki/bfwrepo/images/player/kegou.jpg)no-repeat center 10px; border-radius: 5px; margin: 50px auto; padding: 10px; color: #fff; } .top { text-align: center; } .top h3 { font-size: 24px; padding: 10px; } .top span { display: inline-block; padding: 0px 2px; border-radius: 5px; margin-left: 8px; font-size: 12px; border: 1px solid #fff; position: relative; } .top span.active{ border: 1px solid #85c6e6; background:#078ed0; } .top span img { width: 14px; height: 14px; position: absolute; top: -5px; right: -6px; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); animation: Anim 2s linear 1s infinite; } @keyframes Anim { 0% { opacity:0; top: -5px; right:-6px; } 30% { opacity:1; top: -7px; right:-8px; } 65% { opacity:0.5; top: -9px; right:-10px; } 100% { opacity:0; top: -12px; right:-12px; } } .box { margin-top: 10px; text-align: center; height: 320px; overflow: hidden; position: relative; } .info { width: 220px; margin: 0px auto; text-align: center; position: absolute; top: 0px; left: 50%; margin-left: -100px; } .info li { padding: 5px; font-size: 12px; } .proBar { height: 5px; margin: 17px 10px 10px 10px; } .bar { width: 100%; margin: 0px auto; } .barTwig { /*background: #58b2dc;*/ background: #fff; width: 180px; height: 2px; border-radius: 2px; position: relative; } .proBar span { font-size: 12px; margin-top: -7px; margin-right: 8px; width: 32px; height: 16px; } .proBar span:last-child { margin-left: 15px; } .barBall { position: absolute; left: 0px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .btnRow { text-align: center; } .btnRow img { width: 30px; height: 30px; } .btnGroup { width: 200px; margin: 0px auto; text-align: center; height: 40px; } .btnGroup img { margin: 8px; width: 24px; height: 24px; vertical-align: middle; } .btnGroup img:nth-child(2) { width: 30px; height: 30px; } .on span { color: #ffe48a; } </style> </head> <body> <div id="app"> <div id="body"> <div class="main" v-for="(item,index) in musicList" :key="index" v-show="item.isShow"> <div class="top"> <h3>{{item.title}}</h3> <p>{{item.txtname}}<span @click="item.focuState=!item.focuState" :class="item.focuState?'active':''">{{item.focuState?'已关注':'+关注'}}<img src="//repo.bfw.wiki/bfwrepo/images/player/heart.png"/ v-show="item.focuState"></span></p> </div> <div class="box"> <ul class="info"> <li v-for="key in item.messageList"> <span>{{key.name}}</span> </li> <audio :src="item.audioSrc" @timeupdate="audioClick(index)"></audio> </ul> </div> <div class="proBar"> <div class="bar clearfix"> <span class="fl">{{newstarTime}}</span> <div class="barTwig fl"> <div class="barRate" :style="{'width':widthStyle}"></div> <div class="barBall" id="ball"></div> </div> <span class="fl" id="newT">{{newtoalTime}}</span> </div> </div> <div class="btnGroup"> <img src="//repo.bfw.wiki/bfwrepo/images/player/ljiantou.png" @click="addClick" /> <img :src="btnState ?'//repo.bfw.wiki/bfwrepo/images/player/over.png':'//repo.bfw.wiki/bfwrepo/images/player/open.png'" @click="changeClick" /> <img src="//repo.bfw.wiki/bfwrepo/images/player/rjiantou.png" @click="reduceClick" /> </div> </div> </div> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { musicList: [{ title: '下山 (改编版)', txtname: '小熊纯一郎 ', messageList: [ { time: "[00:00.00]", name: "小熊纯一郎 - 下山 (改编版)" }, { time: "[00:13.33]", name: "要想寒假轻松过冬" }, { time: "[00:15.33]", name: "先要忍受磨人期末考的痛" }, { time: "[00:18.41]", name: "平时上课不认真玩世不恭" }, { time: "[00:21.38]", name: "考试前脑子空空" }, { time: "[00:25.02]", name: "每天是彻夜地用功" }, { time: "[00:27.05]", name: "希望在最后几周突击成功" }, { time: "[00:30.10]", name: "放假回家的我 玩耍的我" }, { time: "[00:33.41]", name: "叫一个快活" }, { time: "[00:36.49]", name: "我左手柯南挂窗前" }, { time: "[00:39.26]", name: "右手贝多芬箴言" }, { time: "[00:42.20]", name: "早上背诵知识点" }, { time: "[00:45.15]", name: "晚上习题卷" }, { time: "[00:47.74]", name: "我忍辱负重为明天" }, { time: "[00:50.97]", name: "抱佛脚为及格线" }, { time: "[00:53.90]", name: "切记要日行一善" }, { time: "[00:56.83]", name: "比方说三连" }, { time: "[01:11.68]", name: "我左手柯南挂窗前" }, { time: "[01:14.36]", name: "右手贝多芬箴言" }, { time: "[01:17.27]", name: "早上背诵知识点" }, { time: "[01:20.18]", name: "晚上习题卷" }, { time: "[01:22.82]", name: "我忍辱负重为明天" }, { time: "[01:26.09]", name: "抱佛脚为及格线" }, { time: "[01:29.00]", name: "切记要日行一善" }, { time: "[01:31.91]", name: "比方说三连" } ], isShow: true, audioSrc: '//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3', focuState:true }, { title: '下山 (改编版)2', txtname: '小熊纯一郎', messageList: [ { time: "[00:00.00]", name: "小熊纯一郎 - 下山 (改编版)" }, { time: "[00:13.33]", name: "要想寒假轻松过冬" }, { time: "[00:15.33]", name: "先要忍受磨人期末考的痛" }, { time: "[00:18.41]", name: "平时上课不认真玩世不恭" }, { time: "[00:21.38]", name: "考试前脑子空空" }, { time: "[00:25.02]", name: "每天是彻夜地用功" }, { time: "[00:27.05]", name: "希望在最后几周突击成功" }, { time: "[00:30.10]", name: "放假回家的我 玩耍的我" }, { time: "[00:33.41]", name: "叫一个快活" }, { time: "[00:36.49]", name: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0