课堂作业记录，js部分我真的有点写不来hhh，有参考
效果图：
实现了音乐器的简单功能，播放暂停，快进后退，音量加减，进度条的显示，以及歌词滚动等功能
1、播放暂停
mainControl.onclick = function () {mysong.play();//暂停按钮隐藏，播放按钮出现mainControl.style.display = "none";stopControl.style.display = "block";setInterval(timeSpan, 1000);};stopControl.onclick = function () {mysong.pause();//播放按钮隐藏，暂停按钮出现stopControl.style.display = "none";mainControl.style.display = "block";};
2、快进后退
//后退leftControl.onclick = function () {mysong.currentTime -= 30;};//前进rightControl.onclick = function () {mysong.currentTime += 30;};
3、控制音量
function timeDispose(time) {let mm = parseInt(time / 60);let ss = parseInt(time % 60);return mm + ":" + ss;}
4、进度条的显示
//进度条更新function timeSpan() {songTime.innerHTML =timeDispose(mysong.currentTime) +" | " +timeDispose(mysong.duration);let process = document.querySelector("#process");let processYet = document.querySelector("#processYet");let processWidth = process.style.width.split("px")[0];//求音乐进度条的长度processYet.style.width =(mysong.currentTime / mysong.duration) * processWidth + "px";}
5、时间更新
//时间更新function timeDispose(time) {let mm = parseInt(time / 60);let ss = parseInt(time % 60);return mm + ":" + ss;}
6、歌词滚动
歌词直接去网站搜索提取，这个网站可以
萧萧_爱要坦荡荡LRC动态歌词下载 - 一听音乐网 ()
歌词滚动完整代码如下：
//歌词滚动var lrc = ` [00:00.000] 作词 : 许常德[00:00.017] 作曲 : Rungroth Pholwa[00:00.34]Da La La La…[00:17.04]天色是有点暗[00:18.81]气氛是有点蓝[00:20.81]皎洁的月光显得特别亮[00:24.59]对白是很简单[00:26.63]像是精致装扮[00:28.29]显得通俗不堪[00:32.39]你不必太紧张[00:34.29]诚实会有点难[00:36.25]也许完美对我反而是假象[00:40.15]过去我不想谈[00:42.10]有缺憾也无妨[00:43.83]我要你的自然[00:47.67]爱要坦荡荡[00:51.03]不要装模作样到天长[00:55.38]要你很善良[00:58.70]就算对我说谎也温暖[01:03.06]请你坦荡荡[01:06.46]世上没有满分的浪漫[01:10.88]人们口中说的誓言[01:13.68]真实的可怜[01:15.50]你难道没有被爱背叛的绝望[01:19.17]你不必太紧张[01:20.77]诚实会有点难[01:22.69]也许完美对我反而是假象[01:26.50]过去我不想谈[01:28.60]有缺憾也无妨[01:30.26]我要你的自然[01:34.41]Da La La La…[02:05.16]爱要坦荡荡[02:08.40]不要装模作样到天长[02:12.75]要你很善良[02:16.17]就算对我说谎也温暖[02:20.47]请你坦荡荡[02:23.94]世上没有满分的浪漫[02:28.26]人们口中说的誓言[02:30.93]真实的可怜[02:32.85]你难道没有被爱背叛的绝望[02:36.44]你不必太紧张[02:38.21]诚实会有点难[02:40.17]也许完美对我反而是假象[02:43.99]过去我不想谈[02:45.95]有缺憾也无妨[02:47.72]我要你的自然[02:51.86]Da La La La…`;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();//结果存储在这里
歌词位置滚动
用margin-top: -height;来实现
写一个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;}}}
