论坛 › 欢乐水吧 › 回忆好拥挤到处都是你(DJ 默涵版)-安琪娜【测试马老师的跨域频谱工具】

亚伦影音工作室 发表于 2022-12-8 20:44

回忆好拥挤到处都是你(DJ 默涵版)-安琪娜【测试马老师的跨域频谱工具】

<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3a8ad4f6835d82634554423b0f2372b0.jpg') no-repeat center/cover; box-shadow: 2px 3px 2px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#mplayer { position: absolute; width: 100%; height: 120px; bottom: 0; display: flex; place-items: end;transform: rotateX(180deg);z-index: 12; }
.mLine { position: relative; margin: 0 2px 0 0; width: 6px; height: 20px;background: linear-gradient(180deg, #FA0000 0%,#46F803 66%,rgba(155, 89, 182, 0) 95%);transition: height .45s; }
.mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: #ffffff; top: -4px; }
.tit { position: absolute; top: 30px; font: bold 2.2em sans-serif; color: hsla(90,50%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>

<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:-120px; left:250px;z-index: 11;"><divid="lrcArea"></div></div>

<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 20px,#red 0);-webkit-mask: radial-gradient(transparent 20px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%; "></div>
      <div class="tit">回忆好拥挤到处都是你(DJ 默涵版)</div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://www.qqmc.com/mp3/music252244092.mp3" loop autoplay></audio>
</div>

<script>
(function() {
let ybData = ;
let total = Math.ceil(mplayer.offsetWidth / 6);
      let cNum = 0;
      for(j=0; j<total; j++) {
                let el = document.createElement('span');
                el.className = 'mLine';
                el.style.height = Math.floor(Math.random()* 100) + 'px';
                mplayer.appendChild(el);
      }
      let lines = document.querySelectorAll('.mLine');

      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      
      aud.addEventListener('timeupdate', () => {
                cNum ++;
                if(cNum >= ybData.length) cNum = 0;
                setPinpu(cNum);
      });

      function setPinpu(num) {
                let data = ybData;
                for(j=0; j<total; j++) {
                        lines.style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
                }
      }

})();
</script>
<style>

#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; padding: 0;list-style: none;}

#lrcArea{width: 980px;

    height: 200%;

    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);

    display: block;margin: 0px -100px;}

#lrcArea ul{width: 100%;150px;

text-align: center;

    padding: 0;

    transition: 0.3s all ease;/*一定要加上不然看着突兀*/

    margin: 480px 0px;

        }

#lrcArea ul li{height: 0px;

    line-height: 0px;

    font-family:悟空大字库;

    font-size: 0px;

    color: #000000;

    font-weight: normal;

    transition: .3s all ease;/*一定要加上不然看着突兀*/

   display: block;

   margin: 0px auto;}

#lrcArea ul li.cur{font-size: 35px;

   font-family:悟空大字库;text-align: center;

   color: #FF0000;

    font-weight: bold; margin: 0px auto;}



/*mv动画*/

.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:50px;z-index: 4;}

.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }

.z360z{animation:rotating 10s linear infinite;

}@keyframes rotating{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

</style>

<style type="text/css">.items{animation: slider 0.26s linear infinite ;}

@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}

50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}

</style>

<script id="lrc" type="text">
回忆好拥挤到处都是你(DJ 默涵版)-安琪娜
任时光洗涤 依然很清晰
我从未放弃 你从未曾远离
回忆好拥挤 到处都是你
你就汹涌在脑海 避无可避
任人来人往 仍无可代替
你陪我一程 我用一生铭记
曾经的两人 只剩我自己
可我从不后悔 那段交集
好久没有 关于你的消息
我刚说要忘记 思念又来袭
回忆的点滴 都那么熟悉
就像那个我们 还在一起
而你是否 想过和我联系
我想着你微笑 想着你哭泣
回忆好拥挤 到处都是你
你就赖在我心底 如此神气
任时光洗涤 依然很清晰
我从未放弃 你从未曾远离
回忆好拥挤 到处都是你
你就汹涌在脑海 避无可避
任人来人往 仍无可代替
你陪我一程 我用一生铭记
回忆的点滴 都那么熟悉
就像那个我们 还在一起
而你是否 想过和我联系
我想着你微笑 想着你哭泣
回忆好拥挤 到处都是你
你就赖在我心底 如此神气
任时光洗涤 依然很清晰
我从未放弃 你从未曾远离
回忆好拥挤 到处都是你
你就汹涌在脑海 避无可避
任人来人往 仍无可代替
你陪我一程 我用一生铭记
回忆好拥挤 到处都是你
你就赖在我心底 如此神气
任时光洗涤 依然很清晰
我从未放弃 你从未曾远离
回忆好拥挤 到处都是你
你就汹涌在脑海 避无可避
任人来人往 仍无可代替
你陪我一程 我用一生铭记
</script>

<script type="text/javascript">

var musicPlayer = function() {

                        return this.init.apply(this, arguments);

                };



                musicPlayer.prototype = {

                        constructor: musicPlayer,

                        init:function(options) {

                                if(isEmptyObj(options) || typeof options !== 'object') return;

                                this.player = options.player;

                                this.lrc = options.lrc;

                                this.lrcArea = options.lrcArea;

                                //用于保存歌词

                                this.lrcArr = [];

                                //用于保存时间戳

                                this.timestamp = [];

                                //处理歌词

                                this.handleLrc(this.lrc);

                                var that = this;



                                this.player.addEventListener('play', function() {

                                        that.play();

                                }, false);



                                this.player.addEventListener('pause',function() {

                                        that.pause();

                                }, false);



                                //歌词索引

                                this.idx = 0;

                        },

                        //格式化歌词

                        handleLrc:function(lrc) {

                                var re = /(\[.+\])(.+)?/gm,

                                        ul = cEl('ul'),

                                        frag = document.createDocumentFragment(),

                                        tmpArr,i,len;

                                this.lrcArea.innerHTML = '';

                                frag.appendChild(ul);

                                ul.id = 'c';

                                this.lrcArea.appendChild(frag);



                                var        txt = lrc.replace(re,function(a,b,c) {

                                        return b + (c === undefined ? '&nbsp;' : c) + '\n';

                                });



                                tmpArr = txt.split('\n');



                                //处理歌词

                                for(i = 0,len = tmpArr.length; i < len; i++) {

                                        var item = trim(tmpArr);

                                        if(item.length > 0) {

                                                this.lrcArr.push(item);

                                        }

                                }

                               

                                frag = document.createDocumentFragment();



                                for(i = 0,len = this.lrcArr.length; i < len; i++) {

                                        var li = cEl('li');

                                        if(i === 0) {

                                                li.className = 'cur';

                                        }

                                        li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')

.replace('','').replace('','');

                                        //处理时间

                                        this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {

                                                return b;

                                        }).replace('[','').replace(']',''));

                                        frag.appendChild(li);

                                }



                                ul.appendChild(frag);

                                this.li = g('lrcArea').getElementsByTagName('li');

                        },

                        //播放

                        play:function() {

                                this.stop = false;

                                var that = this,

                                        player = this.player,

                                        i,len;



                                this.t = setInterval(function() {

                                        if(that.stop) return;

                                        that.curTime = player.currentTime;



                                        for(i = 0,len = that.timestamp.length - 1; i < len; i++) {

                                                var        prevTime = that.formatTimeStamp( that.timestamp ),

                                                        nextTime = that.formatTimeStamp( that.timestamp );

                                                //当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词

                                                if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {

                                                        that.scrollToLrc(i);

                                                        return;

                                                }

                                        }

                                },300);

                        },

                        //暂停

                        pause:function() {

                                this.stop = true;

                                clearInterval(this.t);

                        },

                        //格式化时间

                        formatTimeStamp:function(timestamp) {

                                var re = /(+):(+)\.(+)/i,

                                        seconds = timestamp.replace(re,function(a,b,c,d) {

                                                return Number(b * 60) + Number(c) + parseFloat('0.'+ d);

                                        });

                                return seconds;

                        },

                        //歌词滚动

                        scrollToLrc:function(idx) {

                                var ds = getOffset(this.li).top,

                                        i,len;



                                //如果歌词索引没有变动，则认为这句没有唱完，不处理

                                if(this.idx === idx) return;

                                //否则更新索引值并更新样式和位置

                                this.idx = idx;

                                for(i = 0,len = this.li.length; i < len; i++) {

                                        this.li.className = '';

                                }

                                this.li.className = 'cur';

                                this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;

                        }

                };



                function g(id) {

                        return typeof id === 'string' ? document.getElementById(id) : id;

                }

                function cEl(el) {

                        return document.createElement(el);

                }

                function trim(str) {

                        return str.replace(/(^\s*)|(\s*$)/g, "");

                }

                function isEmptyObj(o) {

                        for(var p in o) return false;

                        return true;

                }

                function getOffset(el) {

                        var parent = el.offsetParent,

                                left = el.offsetLeft,

                                top = el.offsetTop;



                        while(parent !== null) {

                                left += parent.offsetLeft;

                                top += parent.offsetTop;

                                parent = parent.offsetParent;

                        }



                        return {

                                left: left,

                                top: top

                        };

                }
var p = new musicPlayer({

                        player: g('aud'),

                        lrc: g('lrc').innerHTML,

                        lrcArea: g('lrcArea')

                });

</script>

<script type="text/javascript">

var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);

</script>

小辣椒 发表于 2022-12-8 21:17

真的奇怪，我看见频谱是倒的{:4_203:}

小辣椒 发表于 2022-12-8 21:17

https://pic.imgdb.cn/item/6391e3bab1fccdcd363abc22.png

亚伦影音工作室 发表于 2022-12-8 21:25

小辣椒 发表于 2022-12-8 21:17


http://pan.yinhuabbs.cn/view.php/6e97cfc433704bade010e4a9e1b0d518.jpg

红影 发表于 2022-12-8 21:28

漂亮，这个频谱调的色彩很漂亮，欣赏亚伦老师好帖{:4_204:}

小辣椒 发表于 2022-12-8 21:55

你这个代码有问题，不能加分，也是第一楼不能回复只能直接下面回帖

亚伦影音工作室 发表于 2022-12-9 08:10

小辣椒 发表于 2022-12-8 21:17


马老师这个频谱在我的电脑里显示就是倒立的，我只好改了一下，谁知道又闹乌龙了！我看你的贴就是倒立的。

樵歌 发表于 2022-12-9 10:11

色彩好艳丽，我看到是直立的。

樵歌 发表于 2022-12-9 10:11

小辣椒 发表于 2022-12-8 21:17
真的奇怪，我看见频谱是倒的

是你把电脑放反了{:4_189:}

梦缘 发表于 2022-12-9 20:28

多谢老师的分享，好听啊！{:4_178:}

查看完整版本: 回忆好拥挤到处都是你(DJ 默涵版)-安琪娜【测试马老师的跨域频谱工具】