吴采乐 - 罗刹海市|老小孩讲述

【改编】吴采乐 - 罗刹海市

导语：

修改

字体调整：大 | 中 | 小

发表于2023年09月16号 14点阅读 5678 评论1 点赞3 ©著作权归作者所有

<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>吴采乐 - 罗刹海市title>
<style>
#papa {margin: 0 auto;width:100%;height: 640px;background: lightgreen url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8c26f36f0e7def3294fae69643ba486.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000;position: relative;display: grid;place-items: center;z-index: 10000;overflow: hidden;}:hover
#mplayer {display: block;}
#mplayer {position: absolute;top:80%;left:80%;color:#FF0000;filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em 华文隶书;opacity: 1;cursor: pointer; z-index: 11}
#lrc {left: 1%;top: 80%;}
#lrcc {left: 100%;transform: translate(-102%);top: 90%;}
#lrc, #lrcc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border: 0px solid black;position: absolute;z-index: 2;font: normal 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}
@keyframes cover2 {}
.list {list-style: none;margin-left: 0px;width: 600px;height: 400px;position: absolute;z-index: 2;overflow: hidden;}
.list li {width: 100%;height: 600px;position: relative;animation: myfirst 60s 1;line-height: 600px;text-align: center;font: normal 3.5em 黑体;color: rgb(255, 255, 255,0);transition: all .5s;filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;color: #000000;transform: scale(0);}10% {opacity: 1;color: #800000;transform: scale(1);}15% {opacity: 1;color: #800000;transform: scale(1);}50% {opacity: 0;color: rgb(255, 255, 255,0);transform: scale(1);}}
#prog{left: 100%;top: 1%;font: normal 2em 华文隶书;color: #ffffff;text-shadow: 1px 1px 0 #000;width: 200px;position: absolute;transform: translate(-102%);}
style>
head>
<body>
<div id="papa">
<div id="prog">00:00 | 00:00div>
<audio id="MusicPlayer" src="https://sharefs.ali.kugou.com/202309161258/f53850b9b69d6c4ccf738f88fe87830b/v3/3af360d40fad402cd738740a3b2b6d41/yp/full/a1000_u0_p409_s812980483.mp3" loop autoplay>audio>
<ul class="list">
<li><p id="ti">歌曲:罗刹海市p><p style="zoom: .7">演唱:吴采乐<br>p>li>
ul>
<span id="mplayer">播放span>
<div id="lrc" data-lrc="">div>
<div id="lrcc" data-lrc="">div>
div>
<span id="lrcStr" style="visibility: hidden;">
[id:$00000000]
[ar:吴采乐]
[ti:罗刹海市]
[by:]
[hash:3af360d40fad402cd738740a3b2b6d41]
[al:]
[sign:]
[qq:]
[total:293000]
[offset:0]
[00:00.31]吴采乐 - 罗刹海市
[00:01.02]作词：刀郎
[00:01.18]作曲：刀郎
[00:02.64]罗刹国向东两万六千里呀
[00:08.88]过七冲越焦海三寸的黄泥地
[00:15.17]只为那有一条一丘河
[00:21.55]河水流过苟苟营
[00:30.50]苟苟营当家的叉杆儿
[00:33.62]唤作马户
[00:36.83]十里花场有浑名
[00:43.10]她两耳傍肩三孔鼻
[00:47.27]未曾开言先转腚
[00:50.35]每一日蹲窝里把蛋来卧
[00:56.43]老粉嘴多半辈儿
[00:59.09]以为自己是只鸡
[01:01.25]那马户不知道他是一头驴
[01:06.78]那又鸟不知道他是一只鸡
[01:12.44]勾栏从来扮高雅
[01:17.59]自古公公好威名
[01:37.70]打西边来了一个小伙儿
[01:40.92]他叫马骥
[01:44.04]美丰姿少倜傥华夏的子弟
[01:50.44]只为他人海泛舟搏风打浪
[01:56.83]龙游险滩流落恶地
[02:02.94]他见这罗刹国里常颠倒
[02:09.08]马户爱听那又鸟的曲
[02:14.94]三更的草鸡打鸣当司晨
[02:21.12]半扇门楣上裱真情
[02:27.01]它红描翅那个黑画皮
[02:30.36]绿绣鸡冠金镶蹄
[02:33.73]可是那从来煤蛋儿
[02:36.74]生来就黑
[02:39.90]不管你咋样洗呀
[02:42.65]那也是个脏东西
[02:45.04]那马户不知道他是一头驴
[02:50.29]那又鸟不知道他是一只鸡
[02:55.96]岂有画堂登猪狗
[03:01.07]哪来鞋拔作如意
[03:22.98]它红描翅那个黑画皮
[03:26.40]绿绣鸡冠金镶蹄
[03:30.17]可是那从来煤蛋儿
[03:33.29]生来就黑
[03:35.70]不管你咋样洗呀
[03:38.25]那也是个脏东西
[03:51.85]爱字有心心有好歹
[03:54.76]百样爱也有千样的坏
[03:57.52]女子为好非全都好
[04:00.12]还有黄蜂尾上针
[04:01.80]西边的欧钢有老板
[04:04.60]生儿维特根斯坦
[04:07.76]他言说马户驴又鸟鸡
[04:10.25]到底那马户是驴
[04:11.63]还是驴是又鸟鸡
[04:13.22]那驴是鸡那个鸡是驴
[04:14.84]那鸡是驴那个驴是鸡
[04:16.48]那马户又鸟
[04:20.30]是我们人类根本的问题
span>
<script>
/*变量补偿,计数*/
var averAdd = 0.3,mKey = 0;
/*获得歌词数组*/
lrcAr = getLrcAr(lrcStr.innerHTML);
/*函数：处理歌词*/
function getLrcAr(r){var a=[],t=[60,1,.001];b=r.split("\n");for(var n in b){var e=[],i=/\d+[\.:]\d+([\.:]\d+)?/g,o=b[n].replace(i,"");if(o){oo=o.replace(/[\[\]\'\"\t,]s?/g,"");var c=b[n].match(i);if(null!==c)for(var l in c){var f=c[l].match(/\d+/g),v=0;for(var u in f)v+=f[u]*t[u];e[0]=[parseFloat(v.toFixed(2)),o],a.push(e[0])}}}return a.sort(function(r,a){return r[0]-a[0]}),lrcTime(a)}
/*函数：处理歌词时间*/
function lrcTime(r){var t=[];for(j=0;j<r.length-1;j++)j!==r.length-1&&(t[j]=parseFloat((r[j+1][0]-r[j][0]).toFixed(1)));var n=parseInt(t.reduce(function(r,t){return r+t})/(t.length-1))+averAdd;return t.push(n),t.forEach(function(t,a){r[a][2]=t>n?n:t}),r}
/*函数：模拟显示同步歌词*/
function showLrc(r){lrca=lrcAr[mKey][1],lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr[mKey+1][1];var t=String(mKey/2).indexOf(".");-1==t?(0==mKey&&(lrc.innerHTML=lrca),lrc.dataset.lrc=lrca,lrcc.innerHTML=lrcb,lrcc.dataset.lrc="",lrc.style.setProperty("--motion","cover1"),lrc.style.setProperty("--tt",r+"s"),lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--motion","cover2")):(lrc.innerHTML=lrcb,lrcc.dataset.lrc=lrca,lrc.dataset.lrc="",lrcc.style.setProperty("--motion","cover1"),lrcc.style.setProperty("--tt",r+"s"),lrcc.style.setProperty("--state","running"),lrc.style.setProperty("--motion","cover2")),mKey+=1}
/*函数：处理当前歌词索引 mKey*/
function calcKey(){for(j=0;j<lrcAr.length;j++)if(MusicPlayer.currentTime<=lrcAr[j][0]){mKey=j-1;break}mKey<0&&(mKey=0),mKey>lrcAr.length-1&&(mKey=lrcAr.length-1);var r=lrcAr[mKey][2]-(MusicPlayer.currentTime-lrcAr[mKey][0]);showLrc(r)}
/*函数：暂停播放处理*/
function mState(){MusicPlayer.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.innerHTML="播放"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.innerHTML="暂停")}
/*按钮：暂停播放按钮*/
mplayer.onclick=function(){MusicPlayer.paused?MusicPlayer.play():MusicPlayer.pause()};
/*监听：暂停*/
MusicPlayer.addEventListener("pause",function(){mState()});
/*监听：播放*/
MusicPlayer.addEventListener("play",function(){mState()});
/*监听：查询事件*/
MusicPlayer.addEventListener("seeked",function(){calcKey()});
/*监听：进度显示歌词*/
MusicPlayer.addEventListener("timeupdate",function(){prog.innerText = toMin(MusicPlayer.currentTime) + ' | ' + toMin(MusicPlayer.duration);for(j=0;j<lrcAr.length;j++)if(MusicPlayer.currentTime>=lrcAr[j][0]){if(cKey=j,mKey!==j)continue;showLrc(lrcAr[j][2])}});
/*函数处理时间 00:00*/
function toMin(r){if(!r)return"00:00";r=Math.floor(r);var t=parseInt(r/60),n=parseFloat(r%60);return 10>t&&(t="0"+t),10>n&&(n="0"+n),t+":"+n}
script>
body>
html>