美丽草原我的家 --- 多行歌词显示尝试
本帖最后由 起个网名好难 于 2023-3-10 18:17 编辑 <br /><br />歌词显示可以是1 - 多行，以4行为例<style>@charset "utf-8";.lyricDisp{filter:drop-shadow(1px 1px 1px white);transition:.3s all ease;color:hsl(60,100%,50%);text-align:center;text-align:left;}.lyricDisp:first-child{font-size:1.5em;color:hsl(0,0%,60%);transition:font-size 0.6s;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;background-image:linear-gradient(hsl(0,100%,50%),hsl(270,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}.LRCShow{position:absolute;left:15%;bottom:10px;width:80%;min-height:1.2em;font-size:2em;font-weight:bold;font-family:楷体;cursor:pointer;}
</style>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==2&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('playing',function(){that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx>=that.lrcVec.length)return;if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.showLrcObj.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
</script>
<!------ 以下为定制部分 ---->
<div style="width:960px;height:640px;position:relative;background:skyblue url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F11005724%2F6b75ef6dd016489fa1980639b675ea2e.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTEwMDU3MjQvNmI3NWVmNmRkMDE2NDg5ZmExOTgwNjM5YjY3NWVhMmUuanBn%2Fsign%2F811da16b8977c527e7f5d579c7a439f5.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672030053&t=e80083e83eb282eb457609501c10ec30) no-repeat center/cover;overflow:hidden;border-radius:24px;box-shadow:3px 3px 20px black;margin:100px 16px 32px -200px;">
<dir class="LRCShow"></div>
</div>
<script type="text/javascript">
let lrctxt = `
美丽的草原我的家\n风吹绿草遍地花\n彩蝶纷飞百鸟儿唱\n一弯碧水映晚霞\n骏马好似彩云朵\n牛羊好似珍珠撒\n啊，牧羊姑娘放声唱\n愉快的歌声满天涯\n牧羊姑娘放声唱\n愉快的歌声满天涯\n\n美丽的草原我的家\n水清草美我爱她\n草原就像绿色的海\n毡包就像白莲花\n牧民描绘幸福景\n春光万里美如画\n啊，牧羊姑娘放声唱\n愉快的歌声满天涯\n牧羊姑娘放声唱\n愉快的歌声满天涯\n\n`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://music.163.com/song/media/outer/url?id=224148.mp3", // 歌曲链接
showLines:4 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
本帖最后由 起个网名好难 于 2022-11-26 16:51 编辑
<!------ 以下为定制部分 ---->
<div style="width:960px;height:640px;position:relative;background:skyblue url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F11005724%2F6b75ef6dd016489fa1980639b675ea2e.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTEwMDU3MjQvNmI3NWVmNmRkMDE2NDg5ZmExOTgwNjM5YjY3NWVhMmUuanBn%2Fsign%2F811da16b8977c527e7f5d579c7a439f5.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672030053&t=e80083e83eb282eb457609501c10ec30) no-repeat center/cover;overflow:hidden;border-radius:24px;box-shadow:3px 3px 20px black;margin:100px 16px 32px -200px;">
<dir class="LRCShow"></div>
</div>
<script type="text/javascript">
let lrctxt = `
美丽的草原我的家
词：火华
曲：阿拉腾奥勒
美丽的草原我的家
风吹绿草遍地花
彩蝶纷飞白鸟儿唱
一弯碧水映晚霞
骏马好似彩云朵
牛羊好似珍珠洒
啊
牧羊姑娘放声唱
愉快的歌声满天涯
牧羊姑娘放声唱
愉快的歌声满天涯
美丽的草原我的家
水清草美我爱它
草原就像绿色的海
毡包就像白莲花
牧民描绘幸福景
春光万里美如画
啊
牧羊姑娘放声唱
愉快的歌声满天涯
牧羊姑娘放声唱
愉快的歌声满天涯
愉快的歌声满天涯
`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://www.qqmc.com/up/kwlink.php?id=594826&.mp3", // 歌曲链接
showLines:4 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
四行歌词，漂亮的制作{:4_187:} 醉美水芙蓉 发表于 2022-11-26 13:43
欣赏老师佳作！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 红影 发表于 2022-11-26 14:08
四行歌词，漂亮的制作
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 起个网名好难 发表于 2022-11-26 15:10
客气了，问好{:4_187:} 欣赏老师佳作！ 寒冬残荷 发表于 2022-11-26 18:12
欣赏老师佳作！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 欣赏音画佳作！收藏！ 相约爱晚亭 发表于 2022-12-2 15:41
欣赏音画佳作！收藏！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2
页:
[1]