| 原生js html音乐播放器(歌词滚动) | 您所在的位置：网站首页 › ppt歌词滚动播放 › 原生js html音乐播放器(歌词滚动) |
原生js html音乐播放器(歌词滚动)
|
本周学习了js的,用老师教的敲了一个音乐播放器 准备工作首先随便找首歌
现在就开始写 html 和 css 了 很简单 就不解释了 直接上代码 html Music player -0.1s +0.1s 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 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 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 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 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 //把一句分割为俩部分 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 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 activeLi.classList.remove("active");//删 } $("ullrc").children[index].classList.add("active");//添 } 歌词行数获取接着只要得到歌词在哪一行就可以了 这个很简单 比较播放时间,出现播放时间小于数组存的时间的情况,直接返回index-1 function getLrcIndex(){ var time = $("MusicPlayer").currentTime; for (var index = 0; index return index - 1; } } }因为最开始时返回值为 -1,所以还要在前面的调用中判断如果 index == -1 的话退出函数 |
然后用一个小工具扒它的歌词
前期准备完成
【本文地址】
公司简介
联系我们