网页制作网站发布教学设计,社交app系统开发,discu论坛网站模板,中山网站搜索引擎优化html制作滚动歌词的方法#xff1a;首先在标签里面写好编码格式#xff0c;引入css样式和jQuery#xff1b;然后放置播放器#xff0c;代码为【】。本教程操作环境#xff1a;windows7系统、html5版#xff0c;DELL G3电脑。html制作滚动歌词的方法#xff1a;首先我们创…html制作滚动歌词的方法首先在标签里面写好编码格式引入css样式和jQuery然后放置播放器代码为【】。本教程操作环境windows7系统、html5版DELL G3电脑。html制作滚动歌词的方法首先我们创建一个html文件名字随便取比如index.html,这个简单不用多说。不着急开始写代码我们在创建一个css文件不妨就命名为musicplay.cssjs的话我们直接写道html文件里面方便阅读和调整就不创建新的js文件了但是你要准备jQuery文件如果没有也没关系待会说解决方法。准备工作结束了我们开始写了首先在标签里面写好编码格式顺便也把我们之前创建的css样式和jQuery引入代码如下代码如下爱在西元前-周杰伦head内容写好后我们开始写body里面的了首先我们用放置播放器就是标签代码如下去即可 --接着写一个盒子代码如下盒子的css代码如下(功能见备注)接下来就是js脚本事了我们的设计思路是(分下面几个函数完成)函数1parseLyric()分割歌词这一步主要是为了分行显示歌词函数2highLight()当前放到的歌词高亮显示为了表示当前唱到那一句了函数3audio.addEventListener()实时渲染因为是滚动的所以要不停的渲染函数4getLineNo()获取此时的行数如果我们快进或快退的时候歌词也要跟着我们的调整而改变函数5audio.addEventListener()播放完回到开始这个可以不做没有太意义这是为了完善功能解释好这几个函数之后我直接贴代码。function parseLyric(text) {//按行分割歌词let lyricArr text.split(\n); //console.log(lyricArr)//0: [ti:爱在西元前] [ar:周杰伦]...let result [];//新建一个数组存放最后结果//遍历分割后的歌词数组将格式化后的时间节点歌词填充到result数组for (i 0; i lyricArr.length; i) { let playTimeArr lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g);//正则匹配播放时间let lineLyric ;if (lyricArr[i].split(playTimeArr).length 0) {lineLyric lyricArr[i].split(playTimeArr); }if (playTimeArr ! null) { for (let j 0; j playTimeArr.length; j) {let time playTimeArr[j].substring(1, playTimeArr[j].indexOf(])).split(:); //数组填充result.push({ time: (parseInt(time[0]) * 60 parseFloat(time[1])).toFixed(4), content: String(lineLyric).substr(1) });}}}return result;}// 这里请按照格式放入相应歌词--开始// 格式可能看着很复杂,其实是根据lrc歌词文件换句前加入\n 换行符,然后删除多余空行.即可!// 这里请按照格式放入相应歌词--结束let audio document.querySelector(audio); let result parseLyric(text); //执行lyc解析 // 把生成的数据显示到界面上去let $ul $();for (let i 0; i result.length; i) { let $li $().text(result[i].content); $ul.append($li);}$(.bg).append($ul);let lineNo 0;// 当前行歌词let preLine 1; // 当播放6行后开始滚动歌词let lineHeight -30; // 每次滚动的距离 // 滚动播放 歌词高亮 增加类名activefunction highLight() {let $li $(li); $li.eq(lineNo).addClass(active).siblings().removeClass(active);if (lineNo preLine) { $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });}}highLight();// 播放的时候不断渲染audio.addEventListener(timeupdate, function() {if (lineNo result.length) return; if ($(li).eq(0).hasClass(active)) { $(ul).css(top, 0);}lineNo getLineNo(audio.currentTime); highLight();lineNo; });// 当快进或者倒退的时候找到最近的后面那个result[i].timefunction getLineNo(currentTime) { if (currentTime parseFloat(result[lineNo].time)) { // 快进for (let i result.length - 1; i lineNo; i--) {if (currentTime parseFloat(result[i].time)) { return i;}}} else {// 后退for (let i 0; i lineNo; i) { if (currentTime parseFloat(result[i].time)) { return i - 1;}}}}//播放结束自动回到开头audio.addEventListener(ended, function() { lineNo 0;highLight();audio.play();$(ul).css(top, 0);});});
