亚伦影音工作室 发表于 2022-12-4 21:23

加个边框收拢一下试试

<style>
#papa { margin: 0px 0px; width: 1200px; height: 600px; background: gray url('https://wj1.kumeiwp.com:812/wj/bl/2022/11/16/78d84421011a0d4a093d73bf6ffd79bc.jpg?t=1670156676&key=cbe38844c04325b1f74d') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { margin: 0px auto 0; display: block; position: absolute; bottom:0px; left: 0px; cursor: pointer; }
</style>
<div style="z-index: 127;width: 1200px; height: 600px; margin-top:30px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: linear-gradient(45deg, #585A5C 23%,#FD0101 75%); text-align: center;">
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:0px; left:200px;z-index: 4;"><divid="lrcArea"></div></div>

<div style="position: absolute; left:460px; top: 180px; width:300px; opacity: .95;">

<imgsrc="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif" alt="" /></div>

<div style="position: absolute; left:360px; top: -10px; width:100%; height: 100%; opacity: .85;">

<imgsrc="https://pic.imgdb.cn/item/62720a52094754312988cb03.gif" alt="" /></div>

<div id="audio">

<audio id="aud" src="https://p4.t57.cn:8399/2021/zw/1/FIY.m4a" loop="loop" autoplay="autoplay"controls="controls" crossOrigin="anonymous"></audio></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/7bceeb8d6c134eda519f4d953b85cd9e.jpg)0px -181px/100% 160%; "></div>
<canvas id="canv" width="1200" height="250"></canvas>
</div>
</div>
<script>
(function () {

        let Act = new AudioContext();

        let audSrc = Act.createMediaElementSource(aud);

        let analyser = Act.createAnalyser();

        audSrc.connect(analyser);

        analyser.connect(Act.destination);

        let ctx = canv.getContext('2d');

        let width = canv.width;

        let height = canv.height;

        let ppColor = ctx.createLinearGradient(400,200,400,0);

        ppColor.addColorStop(0, 'hsla(10,100%,44%,.95)');

        ppColor.addColorStop(0.3, 'hsla(90,100%,50%,.45)');

        ppColor.addColorStop(1, 'hsla(1,100%,70%,.65)');

        let ppNum = 100;

        let voiceHeight = new Uint8Array(analyser.frequencyBinCount);



        (function draw() {

                analyser.getByteFrequencyData(voiceHeight);

                let step = Math.round(voiceHeight.length / ppNum);

                ctx.clearRect(0, 0, width, height);

                for (let j = 0; j < ppNum; j++) {

                        let audiheighteight = voiceHeight;

                        ctx.fillStyle = ppColor;

                        ctx.fillRect(width / 2 + (j * 8), height, 4, -audiheighteight);

                        ctx.fillRect(width / 2 - (j * 8), height, 4, -audiheighteight);

                }

                window.requestAnimationFrame(draw);

        })();

        canv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();



</script>



<style type="text/css">#audio{

    position: absolute;top:520px; left:820px;z-index: 250;

    bottom: 0;

    opacity: 0.2;

transition: all 2s;

transform:scale(0.7);}

#audio:hover{

    opacity: 1;

}

</style>

<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:650px;z-index: 14;}

.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-4 21:25

目前音乐地址只能是后缀为m4a，看来是跨域问题！

红影 发表于 2022-12-4 22:22

这个能评分了。很漂亮的制作，欣赏亚伦老师好帖{:4_187:}
页: [1]
查看完整版本: 加个边框收拢一下试试