论坛 › 欢乐水吧 › 请教马黑老师，帮我调好！

亚伦影音工作室 发表于 2023-4-4 08:29

请教马黑老师，帮我调好！

<style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1164%2ch_620')0 0/100% 100%;
        position: relative;
        z-index: 1;overflow: hidden;
       
}

#gj {top:0%; left:60%;
position: absolute;transform:scale(0.8);
width: 500px;
height: 500px;}
#xzcp {top:22%; left:12%;z-index: 1;
position: absolute;
width: 350px;
height: 350px;
cursor:pointer;
background:url('https://pic.imgdb.cn/item/642b5ce46ea21b9a9ed12e74.png') center/cover no-repeat;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg);opacity: 1; }
}

#mplayer {position: absolute;
      top:0%; left:0%;z-index: 20;
      width: 500px;
      height: 500px;
      cursor: pointer;
}
.pink { background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%;-webkit-transform:rotate(0deg)translate(0%,0%)skewY(0deg);}
.purple { background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%;
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-30deg)translate(34%,0%)skewX(-3deg);}
</style>


<div id="papa">
<div id="gj" >
<div id="xzcp" ></div>
<div id="mplayer" class="pink"></div>
</div>
<canvas id="canv"></canvas>
       
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music176187104.mp3" autoplay loop></audio>
<video id="vid" src="" loop autoplay muted></video>

<script>
let flag = true;
mplayer.onclick = () => {
      flag ? mplayer.classList.add('purple') : mplayer.classList.remove('purple');
      flag = !flag;
};
</script>


<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文隶书;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
爱的暴风雨 - 梦涵
词：三本目
曲：任帅兵
混音：朱合理
就让这 大风吹
一直吹 吹呀吹
吹呀吹
夜凉渐冷心似水
因她走了极空虚
当天的好早已经
变唏与嘘心死了或许
亦曾共对崎与岖
转身竟说实太累
她轻轻讲请放手
爱得太深我仿佛有罪
就让这 大风吹
一直吹 吹呀吹
在暴风中的雨
因爱她 在流泪
独自锁于这孤单痛苦的废墟
才明白 已失去
就让这 大风吹
一直吹 吹呀吹
在暴风中的雨
是谁在掉眼泪
旧事一早告吹
怎去追 不要追
于挣扎后离去
夜凉渐冷心似水
因她走了极空虚
当天的好早已经
变唏与嘘心死了或许
亦曾共对崎与岖
转身竟说实太累
她轻轻讲请放手
爱得太深我仿佛有罪
就让这 大风吹
一直吹 吹呀吹
在暴风中的雨
因爱她 在流泪
独自锁于这孤
单痛苦的废墟
才明白 已失去
就让这 大风吹
一直吹 吹呀吹
在暴风中的雨
是谁在掉眼泪
旧事一早告吹
怎去追 不要追
于挣扎后离去
就让这 大风吹
一直吹 吹呀吹
在暴风中的雨
因爱她 在流泪
独自锁于这孤单痛苦的废墟
才明白 已失去
就让这 大风吹
一直吹 吹呀吹
在暴风中的雨
是谁在掉眼泪
旧事一早告吹
怎去追 不要追
于挣扎后离去
就让这 大风吹
一直吹 吹呀吹
吹呀吹
（Respect）
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60),
        sec = parseFloat(val % 60);
        if (min < 10) min = '0' + min;
        if (sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState =

'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

xzcp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>xzcp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>xzcp.style.animationPlayState = 'paused');

})();
</script>

亚伦影音工作室 发表于 2023-4-4 08:34

本帖最后由 亚伦影音工作室 于 2023-4-4 08:38 编辑

请教马黑老师，如何调整唱针的角度，而且绕上边固定点旋转一个合适角度！谢谢！
.pink { background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%;-webkit-transform:rotate(0deg)translate(0%,0%)skewY(0deg);}
.purple { background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%;
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-30deg)translate(33%,0%)skewX(-2deg);}

还需要添加代码吗？

马黑黑 发表于 2023-4-4 08:52

这是一个极好的创意。我想，这个需求大约是酱紫吧：随着音乐的播放，唱针不断往里靠。

我说一下思路：唱针图片进行rotate旋转合适的角度可以令其往里移动，移动需要与音乐的当前播放时间相关联，需要设计一个算法。一般来说，我们需要唱针从外圈慢慢往里圈移动，从哪个角度开始移动、移动终结时是多少deg先测定好，这样，将之关联音乐总时长，就能确定当前 播放时间节点唱针旋转的角度。

亚伦影音工作室 发表于 2023-4-4 09:00

马黑黑 发表于 2023-4-4 08:52
这是一个极好的创意。我想，这个需求大约是酱紫吧：随着音乐的播放，唱针不断往里靠。

我说一下思路：唱 ...

这是很大的工程，只有马大师能做到，在下不行，目前请老师解决绕固定点到指定点位置！

庶民 发表于 2023-4-4 09:03

真的羡慕您们。

亚伦影音工作室 发表于 2023-4-4 09:07

亚伦影音工作室 发表于 2023-4-4 09:00
这是很大的工程，只有马大师能做到，在下不行，目前请老师解决绕固定点到指定点位置！

暂停后唱针离开且上边固定下边离开。

红影 发表于 2023-4-4 10:02

很漂亮的制作。现在也能做到暂停时指针就离开唱片呀，没看懂亚伦老师的诉求呢。

红影 发表于 2023-4-4 10:04

歌曲是高品质无损音乐，制作是精美的AI女，这个帖子真漂亮。欣赏亚伦老师好帖{:4_187:}

马黑黑 发表于 2023-4-4 12:10

亚伦影音工作室 发表于 2023-4-4 09:00
这是很大的工程，只有马大师能做到，在下不行，目前请老师解决绕固定点到指定点位置！

等我吃完午饭我给一个示例，你可以参考。

樵歌 发表于 2023-4-4 12:52

做得很是漂亮。听马老师说，一个小小动作都 好复杂，怕怕{:4_193:}

亚伦影音工作室 发表于 2023-4-4 13:00

红影 发表于 2023-4-4 10:02
很漂亮的制作。现在也能做到暂停时指针就离开唱片呀，没看懂亚伦老师的诉求呢。

只是没有调试好！

红影 发表于 2023-4-4 21:15

亚伦影音工作室 发表于 2023-4-4 13:00
只是没有调试好！

嗯，那个指针的底部也移动了。

查看完整版本: 请教马黑老师，帮我调好！