在Hbuilder在新建一个目录，分别创建html，css和js文件。
图1
搭建音乐播放器框架
创建一个主容器class="photo"来为音乐播放器搭建背景框架。
|
<!--框架 --> <article> <div>模特</div> <!--歌名 --> <div>李荣浩</div><!--歌手 --> <div></div> <!--音乐图标 --> <div> <!--歌词 --> <div></div> </div> </article> |
插入音乐播放器
在框架下方插入音乐播放器audio，其中，src表示音频的地址，音频后面则显示当浏览器不支持audio时显示的内容。
|
<!--音乐播放器--> <audio id="myMusic" src="content/flac/李荣浩 -模特.mp3"> 您的浏览器不支持音乐播放 </audio> |
创建歌词页面
用<textarea> 标签（多行的文本输入控件）来装载歌词。其中，cols属性表示列数，rows属性表示行数；而display: none表示div隐藏，如果是block，就是显示。
|
<!--歌词--> <textarea name="" id="txt" cols="30" rows="10" style="display: none;"> [ti:模特] [ar:李荣浩] [al:模特] [00:02.51]模特 - 李荣浩 [00:07.56]词：周耀辉 [00:11.56]曲：李荣浩 [00:30.71]穿华丽的服装 为原始的渴望而站着 [00:38.04]用完美的表情 为脆弱的城市而撑着 [00:45.37]我冷漠的接受 你焦急的等待也困着 [00:52.82]像无数生存在橱窗里的模特 [01:00.38]除了灯以外 我还能看见什么 [01:04.26]除了光以外 我还能要求什么 [01:07.96]除了你以外 还能倚赖哪一个 [01:15.18]在千里以外 在呼喊的是什么 [01:19.03]在百年以后 想回忆的是什么 [01:22.77]在离开以前 能否再见那一刻 [01:28.47]记得 你的眼睛将会亮着 [01:33.79]我的手臂将会挥着 [01:37.53]谁说世界早已没有选择 [01:43.97]趁着我会喜怒你会哀乐 [01:48.53]唱几分钟情歌 [01:51.34]没什么 至少证明我们还活着 [01:59.28]像单纯的蝴蝶 为玫瑰的甜美而飞着 [02:06.66]像顽皮的小猫 为明天的好奇而睡着 [02:14.05]是混乱的时代 是透明的监狱也觉得 [02:21.38]是不能继续在橱窗里做模特 [02:29.24]除了风以外 我还能听到什么 [02:33.06]除了尘以外 我还能拒绝什么 [02:36.69]除了你以外 还能倚赖哪一个 [02:43.78]在千里以外 在呼喊的是什么 [02:47.64]在百年以后 想回忆的是什么 [02:51.36]在离开以前 能否再见那一刻 [02:57.00]记得 你的眼睛将会亮着 [03:02.42]我的手臂将会挥着 [03:06.01]谁说世界早已没有选择 [03:12.60]趁着 我会喜怒你会哀乐 [03:17.08]唱几分钟情歌 [03:19.83]没什么 至少证明我们还活着 [03:52.38]记得 你的眼睛将会亮着 [03:57.88]我的手臂将会挥着 [04:01.38]谁说世界早已没有选择 [04:08.03]趁着 我会喜怒你会哀乐 [04:12.53]唱几分钟情歌 [04:15.28]没什么 至少证明我们还活着 </textarea> |
用CSS来美化界面
|
*{ margin: 0; padding: 0; }
.photo{ /*总体框架*/ width: 320px; height: 600px; background: linear-gradient(180deg,#d6ddee,#f1a0a0)fixed;/*背景颜色：xxdeg(角度值): 用角度值指定渐变的方向*/ margin: 50px auto; color: #2c546d;/*文字颜色*/ border-radius: 5px;/*盒子边框四个角的弧度*/ box-shadow: 0 0 7px #ecd5ee;/*盒子外阴影大小和颜色*/ overflow: hidden; }
.title{ /*歌名*/ margin-top: 5px; width: 100%; height: 70px; font-size: 32px; text-align: center; line-height: 70px; }
.singer{ /*歌手*/ width: 100%; height: 40px; font-size: 18px; text-align: center; line-height: 40px; }
.play{ /*音乐播放器图标*/ width: 152px; height: 163px; background-image: url("./content/img/yy1.png"); background-repeat: no-repeat; margin: 10px 85px; }
.lrc{ /*歌词*/ width: 100%; height: 220px; margin: 50px auto; text-align: center; overflow: hidden; }
.lrc p{ line-height: 20px; font-size: 15px; }
.content{ position: relative; }
.play.rotate{/*绑定动画*/ -webkit-animation: rot 5s linear infinite;/*webkit:浏览器；animation：将动画绑定到div（play）上 */ animation: rot 5s linear infinite; }
@keyframes rot{ from{ transform: rotate(0deg); /*deg:旋转角度*/ } to{ transform: rotate(360deg); } } |
其中，@keyframes创建动画，后面跟动画名称，指定的变化时发生时使用％，或关键字"from"和"to"；animation属性控制动画的外观，使用选择器绑定动画。animation属性多种多样，其中，animation-name规定 @keyframes 动画的名称；animation-duration规定动画完成一个周期所花费的秒或毫秒，默认值是0；animation-timing-function规定动画的速度曲线，默认是"ease"；animation-delay规定动画何时开始，默认是 0。
引入JavaScript，使图标按钮动起来
|
var btn = document.getElementsByClassName("play")[0]//取音乐图标(按钮) var myMusic = document.getElementById("myMusic")//取音乐播放器(播放器) var txt = document.getElementById("txt")//取歌词 var con = document.getElementsByClassName("content")[0] var mark = true
btn.onclick = function(){ //按钮点击时执行 if(mark){ this.className += " rotate" myMusic.play()//播放音乐 mark = false }else{ this.className = "play" myMusic.pause()//暂停音乐 mark = true } }
var lrc = txt.value var lrcArr = lrc.split("[")//从哪里开始获取歌词 var html = "" //从头开始获取歌词 for(var i=0; i < lrcArr.length ; i++){//歌词长度 var arr = lrcArr[i].split("]") var time = arr[0].split(".") var timer = time[0].split(":")//分隔音乐播放时显示的时刻：分和秒 var ms = timer[0] * 60 + timer[1] * 1 //1分钟的时间 var text = arr[1] if(text){//判断 html += "<p id=" + ms +">" + text + "</p>" }
con.innerHTML = html } //动画 var num = 0 var oP = con.getElementsByTagName("p")//获取p标签 myMusic.addEventListener("timeupdate",function(){ //取得歌的时间 var curTime = parseInt(this.currentTime) //把当前时间取到，并转换为整数 if(document.getElementById(curTime)){ for(var i=0; i < oP.length ; i++){ oP[i].style.cssText = "font-size: 15px;" } //对歌词样式做处理 document.getElementById(curTime).style.cssText = "background: linear-gradient(-3deg,#eebd89 0%,#d13abd 100%);-webkit-background-clip: text;color: transparent;font-size: 20px;"//播放音乐时，字体颜色变换 if(oP[ 7 + num].id == curTime){ con.style.top = -20 * num + "px" num ++ } } }) |
效果图：
图2
在我看来，该播放器制作的难点在于animation和@keyframes的联合使用以及js代码的运用。本文参照网络视频完成，如有错误，还请指正。
