《 郭 斯 歌 曲 选 听 》
本帖最后由 亦是金 于 2025-7-14 19:04 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_80567">
<head>
<div style="position:relative;width: 1200px;height: 500px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -310px;">
</head>
<marquee STYLE="WiDTH: 1200px; HeiGHT: 500px" HEIGHT="500px" BEHAVIOR="alternate" WIDTH="1200" SCROLLAMOUNT="2"><imgsrc ="https://s1.ax1x.com/2023/02/26/pppRru9.jpg" WIDTH="2000" HEIGHT="500"></MARQUEE>
<img src="https://wj.zp68.com/lxx/yunhua/2022/10/02/gnyu.jpg" alt="" style="position: absolute; width: 80px;height: 80px; transform: translate(-1700px, 400px); mix-blend-mode: multiply;" />
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 100px;height: 50px; transform: translate(-200px, 400px); mix-blend-mode: multiply;" />
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: absolute;width: 500px;height: 50px;top:20px;LEFT: 220px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:28px;">《 郭 斯 歌 曲 选 听 》</span>
<span style="color:#3d46f7;"><span style="font-size:24px;"></span></div>
<div style="position: absolute;width: 500px;height: 50px;top:440px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:22px;">亦是金在线音乐</span></span></span></p></div>
<div style="position: relative; top:-500px;LEFT: 0px;z-index: 12435;">
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2.0em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.0em;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:0em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:400px;bottom:-40px;width:75%;height:120px;margin:6px auto position:relative;<!--歌词位置-->}
#rdisk{position:absolute;left:35px;bottom:20px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;<!--光盘位置-->}
@keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(20deg) rotateZ(360deg);}100%{transform:rotateX(0deg) rotateY(20deg) rotate(0deg);}}
#ground3rd{
width:1000px;height:600px;
position:absolute;font-size:16px;
overflow:hidden;border-radius:0px;
margin:5px 0px 30px -5px;
background:url(https://s4.ax1x.com/2022/03/05/bwbPNq.jpg);
background-position:center;
background-size: cover;
perspective: 1200px;
}
#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1200px;
height: 500px;
animation: rote 80s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rote {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: -1730px 300px;
}
}
#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1200px;
height: 500px;
animation: rotet 100s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rotet {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: 0px -1730px;
}
}
#songList li {
cursor: pointer;
color: #FFFFFF;
font:thick 1em 微软雅黑;
line-height:25px
}
</style>
<div id="ground3rd">
<div class="itemm">
<div style="width: 1200px;height: 500px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:0px;margin-LEFT: 0px;">
<div style="position:relative;width: 1200px;height: 500px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">
</div>
<ol id='songList' style="color:red;position:absolute;top:60px;left:56px;"><!--歌曲菜单位置--></ol>
<div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
background: url('https://i.ibb.co/PzGxWN7/image.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
<div id="LRCShow"></div>
</div>
<!-- 下面一句是存放歌词的标签 -->
<textarea style="visibility:hidden;" id='lrcContent0'></textarea>
<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);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.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';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(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)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.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>
<script type="text/javascript">
(function() {
songParas = [
["《 小 神 仙 》 - 郭 斯","","https://mp3.haoge500.com/upload/128/2020/06/05/1005272.mp3",`《 小 神 仙 》 - 郭 斯
词曲:郭斯
编曲:水宁
演唱:郭 斯
LRC歌词编辑:亦是金
● ● ● ● ● ●
行过小周天 念咒掐指决
贫道我本是 龙虎山
得了道的小神仙
推过九宫图 演过离震乾
贫道我通晓 天文地理
上下这五千年
拜过三清祖 别过了龙虎山
小道我走南又闯北
修行在天地间
来到贵宝地 肚皮叫破天
小道我 在此卜卦算命
凭本事混口饭 劳烦
不论是问姻缘 还是来求官
小道我念咒 掐指一算
指点个一二三
不管你听不听 不管你信不信
你我二人 在此相遇
命中早注定
我是算命的小神仙
卜卦来换酒钱
算命的小神仙呐
行走在江湖间
算命的小神仙
我命他不由天
算命的小神仙呐
天人合一 形神相依 道法自然
● ● ● ● ● ●
元神出了窍 七窍皆生烟
昨夜我梦里 在阎罗殿
给阎王老爷 相过面
起身昆仑山 出门寻寻仙
小道我誓要 在凌霄殿
给太上老君 点根烟
道长且路远 身上无盘缠
小道我只得在贵宝地
凭本事混口饭 劳烦
不论是问姻缘 还是来求官
小道我念咒 掐指一算
指点个一二三
不管你听不听 不管你信不信
你我二人 在此相遇
命中早注定
我是算命的小神仙
卜卦来换酒钱
算命的小神仙呐
行走在江湖间
算命的小神仙
我命他不由天
算命的小神仙呐
天灵灵 地灵灵
太上老君快显灵
算命的小神仙
卜卦来换酒钱
算命的小神仙呐
行走在江湖间
算命的小神仙
我命他不由天
算命的小神仙呐
天人合一 形神相依 道法自然
请叫我 郭大仙儿
-- 谢谢欣赏 --
`],
["《姑娘 姑娘》--郭斯","","https://music.163.com/song/media/outer/url?id=1334296044.mp3",`《姑娘 姑娘》--郭斯
词曲:郭斯
编曲:于茂舒
演唱:郭斯
LRC歌词编辑:亦是金
● ● ● ● ● ●
今天的日子 天气好晴朗
我准备出门 街头去卖唱
我来到路口 弹起了吉他
过往的好心人 发发慈悲吧
有一位姑娘 远远朝我望
他头发很长 长得挺漂亮
我放下吉他 来到她身旁
我开口问道
能否赏个脸 姑娘
你不用太紧张
我的手里没有枪
你不用太紧张
社会他很安康
姑娘姑娘你别慌
我是一个好流氓
不抢钱我也不抢粮
我只想 能跟你搞对象
姑娘姑娘你别慌
我是一个好流氓
不抢钱我也不抢粮
我只想 能跟你搞对象
● ● ● ● ● ●
今天的日子 天气好晴朗
我准备出门 街头去卖唱
我来到路口 弹起了吉他
过往的好心人 发发慈悲吧
有一位姑娘 远远朝我望
他头发很长 长得挺漂亮
我放下吉他 来到她身旁
我开口问道
能否赏个脸 姑娘
你不用太紧张
我的手里没有枪
你不用太紧张
社会他很安康
姑娘姑娘你别慌
我是一个好流氓
不抢钱我也不抢粮
我只想 能跟你搞对象
姑娘姑娘你别慌
我是一个好流氓
不抢钱我也不抢粮
我只想 能跟你搞对象
姑娘姑娘你别慌
我是一个好流氓
不抢钱我也不抢粮
我只想 能跟你搞对象
姑娘姑娘你别慌
我是一个好流氓
不抢钱我也不抢粮
我只想 能跟你搞对象
我只想 能跟你搞对象
-- 谢谢欣赏 --
`],
["《 不 及 》--郭 斯","","https://music.163.com/song/media/outer/url?id=484031837.mp3",`《 不 及 》--郭 斯
词 :刁诗词
曲 :郭 斯
编曲:张镔柳
演唱:郭 斯
LRC歌词编辑:亦是金
● ● ● ● ● ●
如果流浪就要去遥远的地方
那我想带你去看辽阔海洋
那里没有松柏幼秧 没有雪满山岗
那里却处处都有 鸟语花香
如果你就要远去另一片土壤
那我也可以为你插上翅膀
一个没有我的地方 没有冬雪夏长
不用管我在原地 朝思与暮想
时间还长 日子还长
在没有我的那个地方
你是否还会一如往日的善良
有你在才是冬天该有的模样
呜~ 呜呜~
呜~ 呜呜~
呜~ 呜呜~
呜~ 呜呜~
呜~ 呜呜~
如果分别就只剩孤单与惆怅
那我想陪你直到黎明都发烫
踏着清晨的薄雾起航 步步趾高气昂
就算黄昏来临时 怠倦了梦想
如果生活就要像梦一样欢畅
那我宁愿就让你像谎言一样
在幸福的忏悔中生长 常常欢喜若狂
不用管我在原地 一个人流浪
时间太长 日子太长
在没有你的那些时光
我每天都会一如往日的彷徨
原来美丽的远方不及你的身旁
时间太长 日子太长
在没有你的那些时光
我每天都会一如往日的彷徨
原来美丽的远方不及你的身旁
原来美丽的远方不及你的身旁
-- 谢谢欣赏 --
`],
["《 肉 骨 头 》--郭 斯","","https://music.163.com/song/media/outer/url?id=554175114.mp3",`《 肉 骨 头 》--郭 斯
词曲:郭 斯
编曲:欧阳梦溪
演唱:郭 斯
LRC歌词编辑:亦是金
● ● ● ● ● ●
你哼的小曲儿有点儿甜
你生的小脸儿有点儿圆
你穿的花裙儿色儿挺艳呐
你让我心里儿有点儿乱
我有把吉他没有钱
我会的小曲儿还挺全
你要是觉得咱俩挺投缘
姑娘今儿个咱俩就把情谈
是你你是我的小公主
让我随时来为你守护
然后我们一起养条狗
给他取个小名儿叫肉骨头
是你你是我的小幸福
让我陪你欢笑陪你哭
然后我们一起手牵手
一直向前走
眼看着相处小两年儿
你这把小腰儿又胖了两圈儿
你不用担心惹人嫌
你再胖上两圈儿我都喜欢
我卖了吉他换了点钱
我剪了头发就当了小职员
你要是觉得小伙儿挺能干啦
姑娘今儿个咱俩就把婚结
● ● ● ● ● ●
是你你是我的小公主
让我宠你宠到谁都羡慕
然后在每个节日的时候
都会为你准备小小礼物
是你你还是我的小幸福
让我拼尽全力让你满足
然后我们再一起手牵手
一直向前走
是你你是我的小公主
让我随时来为你守护
然后我们一起养条狗
给他取个小名儿叫肉骨头
是你你还是我的小幸福
让我拼尽全力让你满足
然后我们再手牵手
一直向前走
一直到白头
-- 谢谢欣赏 --
`],
["《 远 方 》--郭 斯","","https://music.163.com/song/media/outer/url?id=484030934.mp3",`《 远 方 》--郭 斯
词 :刁诗词
曲 :郭 斯
编曲:张镔柳
演唱:郭 斯
LRC歌词编辑:亦是金
● ● ● ● ● ●
花开了 你走了
山坡上 绿草小花 密麻麻
那晚霞 又远了
小河畔 暮色挥洒 云西下
秋水等微风 我在等你啊
一叠叠长信 写满春和夏
梦落在远方 你却没留下
孤单的老树 新绿满枝丫
啦啦 -- 啦啦 -- 啦啦--
啦啦 -- 啦啦 -- 啦啦--
● ● ● ● ● ●
花开了 你走了
旅途中 细雨微露 伴朝霞
那斜阳 又远了
田野里 萤火飘摇 漫天涯
秋水等微风 我在等你啊
一叠叠长信 写满春和夏
梦落在远方 你却没留下
孤单的老树 新绿满枝丫
啦啦 -- 啦啦 -- 啦啦--
啦啦 -- 啦啦 -- 啦啦--
我多想你留下
听风儿在说话
眼看春光如此无瑕
而如今你在哪
那里叫远方吧
-- 谢谢欣赏 --
`],
];
var opts = {
lrcTxtID:'lrcContent0',
lrcShowID:"LRCShow",
audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
audioCtrl:'rdisk'
};
var km = null;
var idx = 0;
let songList = document.getElementById('songList');
for(n = 0; n < songParas.length; n++) {
let item = document.createElement('li');
item.id = 's'+n;
item.innerHTML = songParas;
songList.appendChild(item);
}
items = songList.getElementsByTagName('li');
for(n = 0 ; n < items.length; n++) {
items.onclick=function() {
idx = parseInt(this.id.substr(1));
document.getElementById('ground3rd').style.backgroundImage = `url(${songParas})`;
if(km){
km.stopMusic();
//km = null;
km.handleLrc(songParas);
km.setAudioUrl(songParas);
km.reStart();
}
else {
document.getElementById(opts.lrcTxtID).innerHTML = songParas;
opts.audioURL=songParas;
km = new lrcPlayer2(opts);
}
}
}
items.click();
setInterval(() => {
if(km) {
items = songList.getElementsByTagName('li');
if(km.isMusicEnd()) {
idx++; idx %= items.length;
items.click();
}
}
//setTimeout(isSongEnded, 500);
}, 500);
})();
</script>
</TD></TR></TBODY></TABLE>
沙发我的 这样直接代码制作出来的速度很快{:4_199:} 亦是金这个制作非常棒,标题字 背景制作很出彩
背景移动转换自然流畅
5首歌词同步,太棒! 小辣椒欣赏加学习{:4_187:} 小辣椒 发表于 2023-3-3 13:03
5首歌词同步,太棒!
谢谢小辣椒欣赏点赞!问好小辣椒!{:4_204:} 小辣椒 发表于 2023-3-3 13:03
小辣椒欣赏加学习
小辣椒客气了!我得多多向你学习!!!{:4_187:} 亦是金 发表于 2023-3-3 13:16
小辣椒客气了!我得多多向你学习!!!
啊~~~千万别这样说,小辣椒会难为情的,你才是多年的播放器高手的{:4_187:} 亦是金 发表于 2023-3-3 13:14
谢谢小辣椒欣赏点赞!问好小辣椒!
谢谢老前辈的{:4_187:} 五首歌曲都有歌词同步,歌词变色也很绚丽。移动的背景也很漂亮。欣赏亦是金老师好帖{:4_199:} 郭斯,这个人的歌没太听过,歌词有趣,歌曲很好听{:4_187:} 精彩制作!{:4_199:} 红影 发表于 2023-3-3 16:07
五首歌曲都有歌词同步,歌词变色也很绚丽。移动的背景也很漂亮。欣赏亦是金老师好帖
问好红影!谢谢欣赏点赞!{:4_204:} 红影 发表于 2023-3-3 16:10
郭斯,这个人的歌没太听过,歌词有趣,歌曲很好听
我也觉得郭斯的歌曲好听,歌词也蛮有意思的!{:4_172:} 樵歌 发表于 2023-3-3 16:12
精彩制作!
问好樵歌!谢谢欣赏!{:4_191:} 真的美好的播放器。 亦是金 发表于 2023-3-3 16:22
问好红影!谢谢欣赏点赞!
每一首去做歌词同步,这个很花功夫的。给亦是金老师点赞{:4_187:} 亦是金 发表于 2023-3-3 16:24
我也觉得郭斯的歌曲好听,歌词也蛮有意思的!
是啊,非常直接,很接地气{:4_204:} 红影 发表于 2023-3-3 19:58
是啊,非常直接,很接地气
同意!{:4_173:}
页:
[1]
2