原生js html音乐播放器(歌词滚动)

本周学习了js的,用老师教的敲了一个音乐播放器

准备工作

首先随便找首歌

然后用一个小工具扒它的歌词

前期准备完成

代码部分

现在就开始写 html 和 css 了

很简单就不解释了直接上代码

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Music player</title><link rel="stylesheet" href="index.css" /></head><body><div class="container"><audio id="MusicPlayer" src="media/袁娅维 - Starfall.flac" controls loop></audio><div class="btn"><button onclick="turn -= 0.1">-0.1s</button><button onclick="turn += 0.1">+0.1s</button></div><div class="lrc"><ul id="ullrc"></ul></div></div><script src="./index.js"></script></body>
</html>

css

*{box-sizing: border-box;
}
body{background: #000;
}
.container{width: 100%;
}
.container #MusicPlayer{width: 600px;display: block;margin: 0 auto;
}
.container .btn{display: block;margin: 0 auto;
}
.container .lrc{width: 700px;height: 450px;overflow: hidden;display: block;margin: 0 auto;
}
.container .lrc #ullrc{width: 100%;padding: 0;list-style: none;transition: 0.3s all ease;margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{height: 35px;line-height: 35px;font-size: 1em;color: #aaa;font-weight: normal;transition: .3s all ease;/*一定要加上不然看着突兀*/list-style-type: none;text-align: center;display: block;width: 100%;margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{ font-size: 1.2em;color: #fff;font-weight: bold;
}

js

完整js

先上完整js然后再讲一下

var lrc = `    歌词歌词歌词`;function $(id) {return document.getElementById(id);
}//这样写以后getid方便function getLrcArray() {var parts = lrc.split("\n");for (let index = 0; index < parts.length; index++) {parts[index] = getLrcObj(parts[index]);}return parts;function getLrcObj(content) {var twoParts = content.split("]");var time = twoParts[0].substr(1);var timeParts = time.split(":");var seconds = +timeParts[1];var min = +timeParts[0];seconds = min * 60 + seconds;var words = twoParts[1];return{seconds: seconds,words: words,};}
}var lrcArray = getLrcArray();function inputLrc() {for (let index = 0; index < lrcArray.length; index++) {var li = document.createElement("li");li.innerText = lrcArray[index].words;$("ullrc").appendChild(li);}
}inputLrc();function setPosition() {var index = getLrcIndex();if (index == -1) {return;}var lrc_li_height = 35, lrc_ul_height = 450;var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";var activeLi = $("ullrc").querySelector(".active");if(activeLi){activeLi.classList.remove("active");}$("ullrc").children[index].classList.add("active");
}var turn = 0;function getLrcIndex(){var time = $("MusicPlayer").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {if (lrcArray[index].seconds > time) {return index - 1;}}
}$("MusicPlayer").ontimeupdate = setPosition;

那接下来就到了我们的重头戏了

首先我们得到了歌词

但是是这样的

第一步歌词信息获取

我们要从这样的字符串中得到信息,就需要先把每段分割开来

接着再从每一段去获取它的时间和歌词俩个信息

那就这样写

var lrc = `
这里是一大堆歌词
`;
var parts=lrc.split("\n");

这样就能把字符串根据回车分割开来,然后就是一步一步分割,直到达到我们要的格式

和上面一个逻辑就不解释了

function getLrcArray() {//分割每一列var parts = lrc.split("\n");//遍历分割每一句for (let index = 0; index < parts.length; index++) {parts[index] = getLrcObj(parts[index]);}return parts;function getLrcObj(content) {//把一句分割为俩部分var twoParts = content.split("]");var time = twoParts[0].substr(1);//将时间前的"["截掉var timeParts = time.split(":");//用秒处理比较翻版我们这里这里转换成秒var seconds = +timeParts[1];var min = +timeParts[0];seconds = min * 60 + seconds;//歌词获取var words = twoParts[1];return{//返回秒和歌词seconds: seconds,words: words,};}
}var lrcArray = getLrcArray();//结果存储在这里

第二步创建li

歌词文件都处理好了就没必要我们亲自去一个一个设置了,这里用js在页面上创建li元素

function inputLrc() {for (let index = 0; index < lrcArray.length; index++) {//不用数,有多少句创建多少li标签var li = document.createElement("li");li.innerText = lrcArray[index].words;//歌词放入$("ullrc").appendChild(li);//将这个li作为ul的子元素}
}

就没了

第三步歌词位置滚动

这里歌词位置的滚动就是根据修改margin-top: ;进行的,然后给元素再增加一个active样式就可以了
但是margin-top: ;的值怎么确定呢?

我要让歌词居中显示,那么画一个模型出来是这样的

每次要让歌词的中间位置处于中线上,我们要算的其实就是溢出部分的高,将这个高写入 margin-top: -height;就可以实现效果了

那问题来了,这个溢出部分的高怎么算呢.我们假设现在播放到了第i行歌词,也就是说要处在中线上的歌词就是第i行歌词,
根据下图可知
溢出部分的高度就是 * i 歌词行高 + 行高 / 2 - 460 / 2*

(为了数组遍历,i是从0开始的)

接着就是写一个active样式,把选中的歌词加上样式,把其他的active去掉即可

function setPosition() {var index = getLrcIndex();var lrc_li_height = 35, lrc_ul_height = 450;//定义行高和歌词box高度var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;//计算if (top < 0) {top = 0;//如果top为负说明歌词在开始几句,无需滚动,top归零}$("ullrc").style.marginTop = -top + "px";//改变mtvar activeLi = $("ullrc").querySelector(".active");//寻找ul下类名为active的元素并返回之if(activeLi){activeLi.classList.remove("active");//删}$("ullrc").children[index].classList.add("active");//添
}

歌词行数获取

接着只要得到歌词在哪一行就可以了

这个很简单

比较播放时间,出现播放时间小于数组存的时间的情况,直接返回index-1

function getLrcIndex(){var time = $("MusicPlayer").currentTime;for (var index = 0; index < lrcArray.length; index++) {if (lrcArray[index].seconds > time) {return index - 1;}}
}

因为最开始时返回值为 -1,所以还要在前面的调用中判断如果 index == -1 的话退出函数