论坛 › 音乐沙龙 › 《发烧交响乐 东曲西奏》CD4

亦是金 发表于 2023-8-30 08:48

《发烧交响乐 东曲西奏》CD4

<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/2629112/00/02/06/5b509bb0793dd.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: -200px;LEFT:200px;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/dqxz4/01.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/02.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/03.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/04.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/05.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/06.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/07.jpg" /> <img alt="" class="photo" src="https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/08.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 48s infinite;
opacity: 0;}

@keyframes round {1% {
opacity: 0;
transform:translate(0%,0%)scale(.5);}
5% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style>
</div>

<style>
#wrapper {
      position: absolute;
      display: flex;
      width: fit-content;
      height: fit-content;
      /* border仅用于观察 */
      border: 1px solid red;
}
#mydiv {
      position: absolute;
      top: -85px;
      left: 350px;
      width: 500px;
      height: 85px;
      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: -120px;;
      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 >《发烧交响乐 东曲西奏》 CD4</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.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:1.8em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:250px;bottom:-30px;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: #f5f3ef;
        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:20px;left:-30px;"><!--歌曲菜单位置--></ol>
    <div id="rdisk"style="width:170px;height:150px;border: 0px solid #000000;
        background: url('https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/xzdh.gif')0 0/100% 100%;<!--无光盘设置-->
        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/dqxz4/401.mp3",`正播放：《 茉 莉 花 》曲／江苏民歌`],
["《在银色的月光下》曲／新疆塔塔尔民谣","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/402.mp3",`正播放：《在银色的月光下》曲／塔塔尔民谣`],
["《 绣 荷 包 》曲／山西民歌","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/403.mp3",`正播放：《 绣 荷 包 》曲／山西民歌`],
["《凤阳花鼓》曲／安徽民歌","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/404.mp3",`正播放：《凤阳花鼓》曲／安徽民歌`],
["《在那遥远的地方》曲/新疆民歌","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/405.mp3",`正播放：《在那遥远的地方》曲/新疆民歌`],
["《每当我想起你》曲／陈玛莉","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/406.mp3",`正播放：《每当我想起你》曲／陈玛莉`],
["《 红 豆 词 》曲／刘雪庵","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/407.mp3",`正播放：《 红 豆 词 》曲／刘雪庵`],
["《花好月圆》曲／严华","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/408.mp3",`正播放：《花好月圆》曲／严华`],
["《 海 采 茶 》曲／客家山歌","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/409.mp3",`正播放：《 海 采 茶 》曲／客家山歌`],
["《无尽的真爱》曲／林照清","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/410.mp3",`正播放：《无尽的真爱》曲／林照清`],
["《 天 黑 黑 》曲／台湾民谣","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/411.mp3",`正播放：《 天 黑 黑 》曲／台湾民谣`],
["《 月 夜 愁 》曲／邓雨贤","","https://ysj147.s3-us-east-1.ossfiles.com/dqxz4/412.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-8-30 09:33

又带来这么多美妙音乐。亦是金老师辛苦了{:4_187:}

红影 发表于 2023-8-30 09:35

制作很漂亮。总标题由摇摆字变成了闪烁字呢。欣赏亦是金老师好帖{:4_199:}

梦油 发表于 2023-8-30 09:52

这真是最美的艺术享受。谢谢亦是金朋友。分享了。

亦是金 发表于 2023-8-30 10:25

红影 发表于 2023-8-30 09:33
又带来这么多美妙音乐。亦是金老师辛苦了

问好红影！{:4_187:}

亦是金 发表于 2023-8-30 10:26

红影 发表于 2023-8-30 09:35
制作很漂亮。总标题由摇摆字变成了闪烁字呢。欣赏亦是金老师好帖

作一点小改变，谢谢欣赏！{:4_204:}

亦是金 发表于 2023-8-30 10:27

梦油 发表于 2023-8-30 09:52
这真是最美的艺术享受。谢谢亦是金朋友。分享了。

问好梦油！谢谢欣赏！{:4_176:}

小辣椒 发表于 2023-8-30 11:40

前辈，你这个频谱是装饰吗，播放器停止频谱还在动，是不是我手机的原因？

亦是金 发表于 2023-8-30 12:54

小辣椒 发表于 2023-8-30 11:40
前辈，你这个频谱是装饰吗，播放器停止频谱还在动，是不是我手机的原因？

问好小辣椒！{:4_187:}是的，频谱是装饰，与音乐无关联！

小辣椒 发表于 2023-8-30 12:58

亦是金 发表于 2023-8-30 12:54
问好小辣椒！是的，频谱是装饰，与音乐无关联！

嗯，发现了，加上也是漂亮的，整体动态效果明显了{:4_199:}

红影 发表于 2023-8-30 14:18

亦是金 发表于 2023-8-30 10:25
问好红影！

问好亦是金老师{:4_204:}

红影 发表于 2023-8-30 14:20

亦是金 发表于 2023-8-30 10:26
作一点小改变，谢谢欣赏！

什么都做做挺好的，帖子等于也是效果的收集呢{:4_173:}

亦是金 发表于 2023-8-30 14:43

红影 发表于 2023-8-30 14:20
什么都做做挺好的，帖子等于也是效果的收集呢

{:4_204:}

红影 发表于 2023-8-30 14:49

亦是金 发表于 2023-8-30 14:43


我就喜欢往帖子里放点以前的效果，借机也复习了{:4_173:}

梦油 发表于 2023-8-30 16:27

亦是金 发表于 2023-8-30 10:27
问好梦油！谢谢欣赏！

亦是金朋友别客气。

查看完整版本: 《发烧交响乐 东曲西奏》CD4