《流淌的歌声20CD》（CD1-CD5）选听
<div class="cont-area"><div style="width: 1200px;height: 710px;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;">
<div style="position:relative;width: 1200px;height: 710px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">
<div style="z-index: !;width: 1350px; height: 710px; top:0px; left:0px; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image:url(); text-align: center;">
<metaname="referrer" content="never">
<video frameborder="0" src="
https://img.tukuppt.com/video_show/2475824/00/01/82/5b4acfdcb1d48.mp4" autoplay muted loop="" controls="" style="position:absolute;left:-20px;top:-50px;background:#000 ;width:1400px; height: 830px;>
<div style="color:#f88;font-size:2.5em;margin-left:560px;top:0px;"></div>
<img class=&lazyload bg-gif" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -160px;LEFT:150px;height: 70px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">
</div>
<img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/01.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/02.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/03.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/04.jpg" />
<style type="text/css">.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:200px;z-index: 300;
filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gradient(black 30% ,transparent 75%);
animation: round 40s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,0%)scale(.5);}
5% {
opacity: 1;
transform:translate(0%,0%)scale(.8);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(.8);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(.8);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(.8);}
}
img:nth-child(4) {animation-delay: 30s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(2) {animation-delay: 10s;}
</style>
</div>
<style>
#wrapper {
position: absolute;
display: flex;
width: fit-content;
height: fit-content;
/* border仅用于观察 */
border: 1px solid red;
}
#mydiv {
position: absolute;
top: -185px;
left: 370px;
width: 500px;
height: 185px;
display: flex;
justify-content: center;
align-items: center;
}
#copydiv { transform: rotateY(-180deg); }
pin-pu {
margin-right: 1px;
width: 1px;
height: 10px;
background: blue;
animation: change .4s var(--delay) infinite alternate linear;
}
@keyframes change {
from { height: 2px; }
to { height: var(--hh); }
}
</style>
<div id="wrapper">
<div id="mydiv"></div>
<div id="copydiv"></div>
</div>
<script>
/* 除以几依据 pin-pu 标签的 width + 希望的间隔值即 margin-right 值 */
let total = Math.ceil(mydiv.offsetWidth / 2);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('pin-pu');
item.style.cssText += `
background: #${Math.random().toString(16).substr(-6)};
height: ${Math.random() * mydiv.offsetHeight}px;
--hh: ${mydiv.offsetHeight / 2 + Math.random() * mydiv.offsetHeight / 2}px;
--delay: -${Math.random()}s;
`;
mydiv.appendChild(item);
});
let node = mydiv;
let clone = node.cloneNode(true);
copydiv.appendChild(clone);
</script>
<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: relative;width: 300px;height: 30px;top:-690px;LEFT: -330px;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:30px;">《流淌的歌声 20CD》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;"> （CD1-CD5）选听</span></div>
<div style="position: relative;width: 500px;height: 50px;top:-100px;LEFT: 980px;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:26px;">亦是金在线音乐</span></span></span></p></div>
</style>
<div style="position: relative; top:-740px;LEFT: 80px;z-index: 12435;">
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1.5px #ffffff;font: bold 2.2em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
.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:1.6em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:300px;bottom:-40px;width:75%;height:120px;margin:6px auto position:relative;<!--歌词位置-->}
#rdisk{position:absolute;left:5px;bottom:0px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 6s 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: 1000px;
height: 600px;
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: 1000px;
height: 600px;
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: #3d46f7;
font:thick微软简中圆;
font-size:18px;
line-height:28px
}
</style>
<div id="ground3rd">
<div class="itemm">
<div style="width: 1000px;height: 600px;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: 1000px;height: 600px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">
</div>
<ol id='songList' style="color:red;position:absolute;top:30px;left:0px;"><!--歌曲菜单位置--></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://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0201.mp3",`同桌的你
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(二)
LRC编辑：亦是金
● ● ● ● ● ●
明天你是否会想起
昨天你写的日记
明天你是否还惦记
曾经最爱哭的你
老师们都已想不起
猜不出问题的你
我也是偶然翻相片
才想起同桌的你
谁娶了多愁善感的你
谁看了你的日记
谁把你的长发盘起
谁给你做的嫁衣
你从前总是很小心
向我借半块橡皮
你也曾无意中说起
喜欢和我在一起
那时候天总是很蓝
日子总过的太慢
你总说毕业遥遥无期
转眼就各分东西
谁安慰爱哭的你
谁看了我给你写的信
谁把它丢在风里
从前的日子都远去
我也将有我的妻
我也曾给她看相片
给她讲同桌的你
啦啦啦 啦啦啦 啦啦啦
啦啦啦 啦啦啦 啦～
啦啦啦 啦啦啦 啦啦
啦～
-- 谢谢欣赏 --`],
["《常回家看看》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0205.mp3",`《常回家看看》 - 梦之旅回家～ 看看～
找点空闲 找点时间
领着孩子 常回家看看
带上笑容 带上祝愿
陪同爱人 常回家看看
妈妈准备了 一些唠叨
爸爸张罗了 一桌好菜
生活的烦恼 跟妈妈说说
工作的事情 向爸爸谈谈
常回家看看 回家看看
哪怕给妈妈刷刷筷子洗洗碗
老人不图儿女为家做多大贡献呀
一辈子不容易 就图个团团圆圆
哪怕给爸爸捶捶后背揉揉肩
一辈子总操心 就奔个平平安安
● ● ● ● ● ●
《常回家看看》
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(二)
LRC编辑：亦是金
-- 谢谢欣赏 --`],
["《美丽的草原我的家》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0211.mp3",`美丽的草原我的家
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(二)
LRC编辑：亦是金
● ● ● ● ● ●
风吹绿草遍地花
彩蝶纷飞百鸟唱
一弯碧水映晚霞
骏马好似彩云朵
牛羊好似珍珠撒
啊嗬～ 牧羊姑娘放声唱
愉快的歌声满天涯
水青草美我爱她
草原就象绿色的海
毡房就像白莲花
牧民描绘幸福景
春光万里美如画
牧羊姑娘放声唱
-- 谢谢欣赏 --`],
["《草原之夜》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0212.mp3",`草原之夜
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(二)
LRC编辑：亦是金
● ● ● ● ● ●
美丽的夜色多沉静
草原上只留下我的琴声
想给远方的姑娘写封信 吔～
可惜没有邮递员来传情
来来来来来 来来来来来
来来来来～
来 来 来 来
等到千里冰雪消融
等到草原上送来春风
可克达拉改变了模样 吔～
姑娘就会来伴我的琴声
-- 谢谢欣赏 --`],
["《 天 堂 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0301.mp3",`天 堂
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(三)
LRC编辑：亦是金
● ● ● ● ● ●
蓝蓝的天空
清清的湖水
绿绿的草原
这是我的家
奔驰的骏马
洁白的羊群
还有你姑娘
我爱你 我的家
我的家 我的天堂
我爱你 喔～
-- 谢谢欣赏 --`],
["《 花 心 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0302.mp3",`花 心
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(三)
LRC编辑：亦是金
● ● ● ● ● ●
花的心 藏在蕊中
空把花期都错过
你的心 忘了季节
从不轻易让人懂
为何不 牵我的手
共听日月唱首歌
黑夜又白昼 黑夜又白昼
人生为欢有几何
春去春会来
花谢花会再开
只要你愿意 只要你愿意
让梦划向你的心海
花瓣泪 飘落风中
虽有悲意也从容
你的泪 晶莹剔透
心中一定还有梦
同看海天成一色
潮起又潮落 潮起又潮落
送走人间许多愁
-- 谢谢欣赏 --`],
["《好人一生平安》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0307.mp3",`好人一生平安
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(三)
LRC编辑：亦是金
● ● ● ● ● ●
有过多少往事
仿佛就在昨天
有过多少朋友
仿佛还在身边
也曾心意沉沉
相逢是苦是甜
如今举杯祝愿
好人都一生平安
谁能与我同醉
相知年年岁岁
咫尺天涯皆有缘
此情温暖人间
-- 谢谢欣赏 --`],
["《 读 书 郎 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0404.mp3",`读书郎
---梦之旅合唱组合---
专辑：流淌的歌声之真情依旧(四)
LRC编辑：亦是金
● ● ● ● ● ●
小么小儿郎
背着那书包上学堂
不怕太阳晒
也不怕那风雨狂
只怕先生骂我懒呐
没有学问 噢无脸见爹娘
郎里格郎里格郎里格郎
小呀么小儿郎呀
不是为做官
也不是为面子宽
只为穷人要翻身呐
不受人欺负 哎不做牛和羊
小儿郎么小儿郎
郎里格郎
-- 谢谢欣赏 --`],
["《青藏高原》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0311.mp3",`正在播放：《青藏高原》 - 梦之旅`],
["《 心 太 软 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0410.mp3",`正在播放：《 心 太 软 》 - 梦之旅`],
["《 童 年 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0411.mp3",`正在播放：《 童 年 》 - 梦之旅`],
["《相思河畔》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0507.mp3",`正在播放：《相思河畔》 - 梦之旅`],
["《我爱你塞北的雪》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0513.mp3",`正在播放：《我爱你塞北的雪》 - 梦之旅`],
["《 笑 脸 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0105.mp3",`正在播放：《 笑 脸 》 - 梦之旅`],
["《 康 定 情 歌 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0111.mp3",`正在播放：《 康 定 情 歌 》 - 梦之旅`],
];
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>
又是这么多歌曲，而且前8首都带歌词同步的，这个太不容易了。给亦是金老师点赞{:4_199:} 那个示波频谱也做了变化，还有加了视频。这个制作真棒{:4_199:} 这些红歌、老歌就是有魅力。 红影 发表于 2023-8-30 21:27
又是这么多歌曲，而且前8首都带歌词同步的，这个太不容易了。给亦是金老师点赞
问好红影！{:4_187:} 红影 发表于 2023-8-30 21:29
那个示波频谱也做了变化，还有加了视频。这个制作真棒
谢谢欣赏！{:4_187:} 梦油 发表于 2023-8-30 21:31
这些红歌、老歌就是有魅力。
问好梦油！{:4_176:}本系列共有4个帖子，近日逐一发表！{:4_205:} 啊~~这么多歌曲做歌词同步，太辛苦了{:4_187:} 经典老歌，经典永恒，都是好听的歌曲{:4_178:} 感谢分享，制作辛苦了{:4_187:} 亦是金 发表于 2023-8-30 21:46
问好红影！
问好亦是金老师，晚上好{:4_187:} 亦是金 发表于 2023-8-30 21:47
谢谢欣赏！
辛苦了，应该谢谢亦是金老师带来的好帖{:4_187:} 小辣椒 发表于 2023-8-30 22:04
啊~~这么多歌曲做歌词同步，太辛苦了
问好小辣椒！{:4_187:} 小辣椒 发表于 2023-8-30 22:05
经典老歌，经典永恒，都是好听的歌曲
我只是用专辑播放器的代码，更换歌曲，添加歌词制作的。不辛苦呢！{:4_205:} 小辣椒 发表于 2023-8-30 22:05
感谢分享，制作辛苦了
谢谢欣赏！{:4_187:} 红影 发表于 2023-8-30 22:10
辛苦了，应该谢谢亦是金老师带来的好帖
晚上好！{:4_187:} 亦是金 发表于 2023-8-30 22:29
晚上好！
晚上好{:4_187:} 问好，多首歌词同步 山里人 发表于 2023-8-30 23:20
问好，多首歌词同步
问好山里人！谢谢欣赏！{:4_176:} 亦是金 发表于 2023-8-30 21:50
问好梦油！本系列共有4个帖子，近日逐一发表！
太好了，谢谢你！
页:
[1]