论坛 › 音乐沙龙 › 《十年网络红歌 (精华篇)》 CD1

亦是金 发表于 2023-9-25 18:04

《十年网络红歌 (精华篇)》 CD1

<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:100px;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="" autoplay muted loop="" controls="" style="position:absolute;left: -30px;top: -50px;background:#000 ;width:1400px; height: 760px;>

<div style="color:#f88;font-size:2.5em;margin-left:560px;top:0px;"></div>

<img class=&lazyload bg-gif" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/674.gif"" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -710px;LEFT: -100px; width:1350px; height: 710px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">

<img class=&lazyload bg-gif" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/yanhua02.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -1400px;LEFT: 400px; width:450px; height: 200px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block; opacity: 1.0;">

<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: -1150px;LEFT:570px;height: 35px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">


</div>
</style>
</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: -100px;;
      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 >《十年网络红歌 (精华篇)》 CD1</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:250px;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: #f7a016;
        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:120px;height:120px;border: 0px solid #000000;
        background: url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11xg1.png')"></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/10nwanglouhongge/jinghua/CD1/jh0110.mp3",`《披着羊皮的狼》 - 刀 郎
选自：《十年网络红歌 (精华篇)》 CD1
词曲：刀 郎|编曲：杨云骠
歌词编辑：亦是金
● ● ● ● ● ●
我小心翼翼的接近
怕你在梦中惊醒
我只是想轻轻的吻吻你
你别担心
我知道想要和你在一起并不容易
我们来自不同的天和地
你总是感觉和我一起
是漫无边际阴冷的恐惧
我真的好爱你我愿意改变自己
我愿意为你流浪在戈壁
只求你不要拒绝不要离别
不要给我风雪
我真的好爱你 我愿意改变自己
我愿意为你背负一身羊皮
只求你让我靠近 让我爱你
相畏相依

我确定我就是那一只披着羊皮的狼
而你是我的猎物是我嘴里的羔羊
我抛却同伴 独自流浪
就是不愿别人把你分享
我确定这一辈子都会在你身旁
带着火热的心随你到任何地方
你让我痴 让我狂
爱你的嚎叫还在山谷回荡
● ● ● ● ● ●
也许我这一生都无法走进你的生命
我却有为你守候一生的勇气
一直到沙漠日落 大海干涸
始终为爱执着
也许我这一生都无法改变你的决定
我却有为你祝福一生的柔情
只要你能够坚信 我的真心
至死不渝
我确定你就是那我心中如花的羔羊
你是我的天使是我的梦想
我搂你在怀里 装进我的身体
让你我的血液交融在一起
你确定看到我为你披上那温柔的羊皮
是一个男人无法表露脆弱的感情
我有多爱你 就有多少柔情
我相信这柔情定能感动天地
● ● ● ● ● ●
我确定你就是那我心中如花的羔羊
你是我的天使是我的梦想
我搂你在怀里 装进我的身体
让你我的血液交融在一起
你确定看到我为你披上那温柔的羊皮
是一个男人要改变命运的决定
我有多这珍惜 珍惜这份真情
我相信这真情在天地里
是最高的荣誉
-- 谢谢欣赏 --`],
["《我爱你你却爱着他》 - 黑 龙","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0113.mp3",`《我爱你你却爱着他》 - 黑 龙
选自：《十年网络红歌 (精华篇)》 CD1
词曲：黑 龙
歌词编辑：亦是金
● ● ● ● ● ●
我把我心都交给了你
而你在梦中却喊着他
就在你梦醒的时分
眼里还在含着泪花
是什么让你爱上了他
难道他比我对你好吗
如果真的会是这样
我也会把你放心里呀
我爱你你却爱着他
我的为你的心都碎了
是不是只有忘记我自己
我的泪才不会如雨下
我爱你你却爱着他
这场游戏我真的累了
你可曾想过我的感受
这样的对我公平吗
● ● ● ● ● ●
我把我心都交给了你
而你在梦中却喊着他
就在你梦醒的时分
眼里还在含着泪花
是什么让你爱上了他
难道他比我对你好吗
如果真的会是这样
我也会把你放心里呀
我爱你你却爱着他
我的为你的心都碎了
是不是只有忘记我自己
我的泪才不会如雨下
我爱你你却爱着他
这场游戏我真的累了
你可曾想过我的感受
这样的对我公平吗
我爱你你却爱着他
我的为你的心都碎了
是不是只有忘记我自己
我的泪才不会如雨下
我爱你你却爱着他
如果他能给你幸福啊
我情愿忍心伤了我自己
默默的祝福你和他
默默的祝福你和他
我爱你你却爱着他
我的为你的心都碎了
是不是只有忘记我自己
我的泪才不会如雨下
我爱你你却爱着他
如果他能给你幸福啊
我情愿忍心伤了我自己
默默的祝福你和他
我爱你你却爱着他
我的为你的心都碎了
是不是只有忘记我自己
我的泪才不会如雨下
我爱你你却爱着他
如果他能给你幸福啊
我情愿忍心伤了我自己
默默的祝福你和他
我爱你你却爱着他
我的为你的心都碎了
-- 谢谢欣赏 -- `],
["《北极星的眼泪》 - 张栋梁","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0102.mp3",`《北极星的眼泪》 - 张栋梁
选自：《十年网络红歌 (精华篇)》 CD1
作词:李念和|作曲:戴浪
歌词编辑：亦是金
● ● ● ● ● ●
像断了线 消失人海里面
我的眼终于失去 你的脸
再等一会 奢望流星会出现
愿如果真的实现 爱能不能永远
明天 或许来不及变
但曾经走过的昨天 越来越远
北极星的眼泪 说不出的想念
原来我们活在两个世界
北极星的眼泪 你哭红的双眼
被淋湿的诺言 淹没在心里面
我抬头看着爱不见
● ● ● ● ● ●
再等一会 奢望流星会出现
愿如果真的实现 爱能不能永远
明天 或许来不及变
但曾经走过的昨天 越来越远
北极星的眼泪 说不出的想念
原来我们活在两个世界
北极星的眼泪 你哭红的双眼
被淋湿的诺言 淹没在心里面
我抬头看着爱不见
当对的人等不到对的时间
就在放开双手的瞬间
爱撕成两边
北极星的眼泪 说不出的想念
原来我们活在两个世界
北极星的眼泪 你哭红的双眼
被淋湿的诺言 淹没在心里面
我抬头看着爱不见
整个宇宙都掉眼泪
-- 谢谢欣赏 --`],
["《下辈子也要找到你》 - 刘 科","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0101.mp3",`请欣赏：《下辈子也要找到你》 - 刘 科`],
["《一万个理由》 - 郑 源","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0103.mp3",`请欣赏：《一万个理由》 - 郑 源`],
["《秋天不回来》 -王 强","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0104.mp3",`请欣赏：《秋天不回来》 -王 强`],
["《你的承诺》 - 海鸣威","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0105.mp3",`请欣赏：《你的承诺》 - 海鸣威`],
["《 冰 吻 》 - 王 键","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0106.mp3",`请欣赏：《 冰 吻 》 - 王 键`],
["《 分 爱 》 -易 欣","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0107.mp3",`请欣赏：《 分 爱 》 -易 欣`],
["《哭泣的玫瑰》 - 刑美美","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0108.mp3",`请欣赏：《哭泣的玫瑰》 - 刑美美`],
["《感动天感动地》 - 宇桐非","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0109.mp3",`请欣赏：《感动天感动地》 - 宇桐非`],
["《分手在那个秋天》 - 浩瀚","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0111.mp3",`请欣赏：《分手在那个秋天》 - 浩瀚`],
["《爱上你等于爱上错》 - 张振宇","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0112.mp3",`请欣赏：《爱上你等于爱上错》 - 张振宇`],
["《下辈子如果我还记得你》 - 马 郁","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0114.mp3",`请欣赏：《下辈子如果我还记得你》 - 马 郁`],
["《别说我的眼泪你无所谓》 - 东来东往","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jinghua/CD1/jh0115.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-25 20:03

问好前辈，今天一下子出来二个音乐帖，速度的{:4_199:}

小辣椒 发表于 2023-9-25 20:04

手机欣赏拉不大界面，回家继续上来欣赏{:4_187:}

醉美水芙蓉 发表于 2023-9-25 20:53

小辣椒 发表于 2023-9-25 21:03

这个代码感觉比较完好，画面出来背景没有出现自己的头像{:4_199:}

小辣椒 发表于 2023-9-25 21:04

非常经典的专辑，谢谢分享{:4_187:}

小辣椒 发表于 2023-9-25 21:04

电脑欣赏很完美{:4_199:}

亦是金 发表于 2023-9-25 21:57

小辣椒 发表于 2023-9-25 20:03
问好前辈，今天一下子出来二个音乐帖，速度的

问好！{:4_187:}

亦是金 发表于 2023-9-25 22:00

小辣椒 发表于 2023-9-25 21:03
这个代码感觉比较完好，画面出来背景没有出现自己的头像

是的，我去将这两个帖子比较比较，看看能不能找出是什么问题！

红影 发表于 2023-9-26 14:08

很多好歌，制作很棒。喜欢来亦是金老师的帖子里听歌。给亦是金老师点赞{:4_199:}

查看完整版本: 《十年网络红歌 (精华篇)》 CD1