|
欢迎点击「算法与编程之美」↑关注咱们！
本文首发于微X公众号："算法与编程之美"，欢迎关注，即时认识更加多此系列文案。
欢迎加入团队圈子！与作者面对面！直接点击！
新建文件目录
在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;
bac公斤round: 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;
bac公斤round-image: url("./content/img/yy1.png");
bac公斤round-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 = "bac公斤round: linear-gradient(-3deg,#eebd89 0%,#d13abd 100%);-webkit-bac公斤round-clip: text;color: transparent;font-size: 20px;"//播放音乐时，字体颜色变换
if(oP[ 7 + num].id == curTime){
con.style.top = -20 * num + "px"
num ++
}
}
})
效果图：
图2
在我看来，该播放器制作的难点在于animation和@keyframes的联合运用以及js代码的运用。本文参照网络视频完成，如有错误，还请指正。 END
实习主编 | 王楠岚
责 编 | 江南沐雪
where2go 团队
微X号：算法与编程之美 
长按识别二维码关注咱们!
温馨提示：点击页面右下角“写留言”发布评论，期待您的参与！期待您的转发！
| 
发表于 2024-10-10 05:23:13