亦是金 发表于 2023-9-2 08:34

《流淌的歌声 20CD》(CD16-CD20)选听

<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://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp4/shanshui0901.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>


</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 {
      font-size: 26px;
      color: #ff0000;
      position: relative;
      text-align:center;
      transform: translate(0%,35%);
      font-weight: normal;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
      background-position: -1200px 0;
      filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
       -webkit-animation:loop 3s linear 1000000;
}

@-webkit-keyframes loop{
   0%{background-position: -1200px 0;}
   100%{background-position: -0 0;}
}


.tit {
      position: relative;
      width: 700px;
      top: -700px;
      left: -80px;;
      font-family:迷你简细圆;
      font-size: 40px;
      text-shadow: 2px 2px #ff00ff;
      font-weight:bold;
      color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span >《流淌的歌声20CD》(CD16-CD20)选听</span>
<span > </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:270px;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: #ffffff;
        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:10px;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/ltdgs04/1601.mp3",`《光阴的故事》 - 梦之旅
专辑:流淌的歌声之真情依旧(十六)
LRC编辑:亦是金
● ● ● ● ● ●
春天的花开 秋天的风 以及冬天的落阳
忧郁的青春 年少的我 曾经无知的这么想
光阴它带走 四季的歌里 我轻轻的悠唱
风花雪月的 诗句里 我在年年的成长
流水它带走 光阴的故事 改变了一个人
就在那 多愁善感而初次 等待的青春

发黄的相片 古老的信 以及褪色的圣诞卡
年轻时为你 写的歌 恐怕你早已忘了吧
过去的誓言 就象那课本里 缤纷的书签
刻划着多少 美丽的诗 可是终究是一阵烟
流水它带走 光阴的故事 改变了两个人
就在那 多愁善感而初次 流泪的青春
遥远的路程 昨日的梦 以及远去的笑声
再次的见面 我们又经历了 多少的路程
不再是旧日 熟悉的你 有着旧日狂热的梦
也不是旧日 熟悉的我 有着依然的笑容
流水它带走 光阴的故事 改变了我们
就在那 多愁善感而初次 回忆的青春
嘟哒嘟哒 嘟哒
嘟哒嘟哒 哈~
-- 谢谢欣赏 --`],
["《浪花里飞出欢乐的歌》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1614.mp3",`《浪花里飞出欢乐的歌》 - 梦之旅
专辑:流淌的歌声之真情依旧(十六)
LRC编辑:亦是金
● ● ● ● ● ●
松花江水波连波
浪花里飞出欢乐的歌
歌唱天鹅项下 啊 珍珠城唉
江南江北好景色

绿水载白帆 两岸花万朵
大桥跨南北 游龙如穿梭
哈尔滨的夏天多迷人
唱不尽我们心中的歌
歌唱英雄的人民
辛勤劳动的成果
北国江城好巍峨
豆花香万里 厂矿奏新歌
同心干四化 风流人物多
松花江的浪花荡激情
唱不尽美好新生活
新生活
呵~
-- 谢谢欣赏 --`],
["《在中国大地上》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1615.mp3",`《在中国大地上》 - 梦之旅
专辑:流淌的歌声之真情依旧(十六)
LRC编辑:亦是金
● ● ● ● ● ●
五谷的芳香飘荡在
中国大地上
肥壮的那个牛羊
奔跑在中国大地上

一声声的锁呐唱出古老的向往
一阵阵的锣鼓闹出崭新的酣畅
你看那小麦 大豆 棉花 高梁
装满了谷囤 装满了谷囤粮仓
你看那田埂 鱼塘 果园 牧场
到处是丰收 丰收景象
镰刀和斧头闪光在
红红的那个太阳
升腾在中国大地上
茁壮的希望生长在
春天的那个祝愿
回旋在中国大地上
一片片笑语溢出了农家的小院
一曲曲的欢歌飞出牧人的胸膛
你看那北国 南疆 东灯 秧歌
人人都喜气 人人都喜气洋洋
你看那山寨 渔村 土楼 毡房
处处都走向 走向希望
-- 谢谢欣赏 --`],
["《校园的早晨》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1701.mp3",`《校园的早晨》 - 梦之旅
专辑:流淌的歌声之真情依旧(十七)
LRC编辑:亦是金
● ● ● ● ● ●
沿着校园熟悉的小路
清晨来到树下读书
初升的太阳照在脸上
也照在身旁这棵小树

亲爱的伙伴 亲爱的小树
和我共享阳光雨露
让我们记住这美好时光
直到长成参天大树
喯啦喯啦 喯啦喯啦
嘡嘡 咚咚咚 喯啦 呵~
-- 谢谢欣赏 --`],
["《咱们的领袖毛泽东》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1704.mp3",`《咱们的领袖毛泽东》 - 梦之旅
专辑:流淌的歌声之真情依旧(十七)
LRC编辑:亦是金
● ● ● ● ● ●
高楼万丈平地起
盘龙卧虎高山顶
边区的太阳红又红
咱们的领袖毛泽东 毛泽东

山川万里气象新
五谷生长绿茵茵
来了咱们的毛主席
挖掉了苦根翻了身 翻了身
自力更生闹革命
开展了生产大运动
为了革命得胜利
跟着咱领袖毛泽东 毛泽东
哎嘿依哟 里么 哎嘿依呀哟
哎嘿依哟 嘿哟嘿哟嘿哟 哎嘿依呀哟
跟着咱领袖毛泽东 毛泽东
-- 谢谢欣赏 --`],
["《小小少年》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1705.mp3",`《小小少年》 - 梦之旅
专辑:流淌的歌声之真情依旧(十七)
LRC编辑:亦是金
● ● ● ● ● ●
小小少年 很少烦恼
眼望四周阳光照
但愿永远这样好

一年一年时间飞跑
小小少年在长高
随着年岁由小变大
他的烦恼增加了
无忧无虑乐陶陶
但有一天 风波突起
忧虑烦恼都到了
喯 喯喯 喯喯 喯喯 喯喯
喯喯 喯喯 喯喯 喯喯
喯喯 喯喯 喯喯 喯喯喯喯
喯喯 喯喯喯 喯喯 喯喯
喯喯 喯喯 喯喯
啦啦啦啦 啦啦啦啦
啦啦啦 啦啦啦啦
啦啦啦啦
-- 谢谢欣赏 --`],
["《 假 如 》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1801.mp3",`《 假 如 》 - 梦之旅
词曲:黄仁清
专辑:流淌的歌声之真情依旧(十八)
LRC编辑:亦是金
● ● ● ● ● ●
我走过青草地
漫步在小河堤
让阳光拥着我
让风儿抱我

远山青又青
蔚蓝的天衬底
凝望着流云
想起了你
假如说我的心中没有情
为什么我会始终念着你
假如说我此刻真不喜欢你呀
早已经把你忘记
啦啦啦 啦啦 啦啦啦 啦啦
啦啦啦 啦啦啦啦啦
-- 谢谢欣赏 --`],
["《大海啊故乡》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1804.mp3",`《大海啊故乡》 - 梦之旅
专辑:流淌的歌声之真情依旧(十八)
LRC编辑:亦是金
● ● ● ● ● ●
小时候妈妈对我讲
大海就是我故乡
海边出生
海里成长

大海呀大海
是我生活的地方
海风吹 海浪涌
随我飘流四方
就像妈妈一样
走遍天涯海角
总在我的身旁
大海呀故乡
我的故乡
呜~
-- 谢谢欣赏 --`],
["《在希望的田野上》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1808.mp3",`正在播放:《在希望的田野上》 - 梦之旅`],
["《年轻的朋友来相会》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1906.mp3",`正在播放:《年轻的朋友来相会》 - 梦之旅`],
["《弹起我心爱的东不拉》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1910.mp3",`正在播放:《弹起我心爱的东不拉》 - 梦之旅`],
["《请跟我来》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1913.mp3",`正在播放:《请跟我来》 - 梦之旅`],
["《明天会更好》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/2001.mp3",`正在播放:《明天会更好》 - 梦之旅`],
["《金瓶似的小山》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/2008.mp3",`正在播放:《金瓶似的小山》 - 梦之旅`],
["《卖汤圆》 - 梦之旅","","https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/2010.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>

焱鑫磊 发表于 2023-9-2 09:14

沙发赏歌!{:4_208:}

红影 发表于 2023-9-2 10:11

哦,又重新发了个,这个居中很到位。要不我把前面发的那个删掉?

亦是金 发表于 2023-9-2 13:00

红影 发表于 2023-9-2 10:11
哦,又重新发了个,这个居中很到位。要不我把前面发的那个删掉?

哈哈!我重复发了!麻烦红影把前面发的那个删掉!谢谢!{:4_187:}

亦是金 发表于 2023-9-2 13:01

焱鑫磊 发表于 2023-9-2 09:14
沙发赏歌!

问好焱鑫磊!{:4_187:}

大猫咪 发表于 2023-9-2 13:18

都是喜欢的经典, 现在听真舒服,谢谢亦是金朋朋友分享! 周末快乐!

{:4_204:}{:4_199:}

红影 发表于 2023-9-2 15:08

亦是金 发表于 2023-9-2 13:00
哈哈!我重复发了!麻烦红影把前面发的那个删掉!谢谢!

好的,我去把那个删掉。

亦是金 发表于 2023-9-2 15:10

大猫咪 发表于 2023-9-2 13:18
都是喜欢的经典, 现在听真舒服,谢谢亦是金朋朋友分享! 周末快乐!

问好大猫咪!{:4_187:}

亦是金 发表于 2023-9-2 15:11

红影 发表于 2023-9-2 15:08
好的,我去把那个删掉。

给您添麻烦!谢谢!{:4_187:}

红影 发表于 2023-9-2 19:17

亦是金 发表于 2023-9-2 15:11
给您添麻烦!谢谢!

没事啊,举手之劳{:4_204:}

亦是金 发表于 2023-9-2 23:40

红影 发表于 2023-9-2 19:17
没事啊,举手之劳

晚上好!{:4_187:}

红影 发表于 2023-9-3 10:09

亦是金 发表于 2023-9-2 23:40
晚上好!

问好亦是金老师,感谢带来这么多好听的专辑{:4_187:}
页: [1]
查看完整版本: 《流淌的歌声 20CD》(CD16-CD20)选听