首页 › 音画作品 › 【慢四】朋友别哭 祖海[测试]

亚伦影音工作室 发表于 2023-11-18 20:33

【慢四】朋友别哭 祖海[测试]

本帖最后由 亚伦影音工作室 于 2023-11-18 20:34 编辑 <br /><br /><style type="text/css">
#bj{position: relative;width: 1164px;height: 620px;MARGIN-LEFT:-150px;margin-top:0px;;overflow:hidden;background:url('https://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg')no-repeat center / cover;--opt: .2;}
#mplayer{width: 300px; height: 300px; position: absolute; left: 10%;top: 10%;
animation: spin 18s linear infinite; }
@keyframes spin {
      0% { transform: rotate(360deg)scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(200%); } 50% { transform: rotate(0deg)scale(1);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 1;}100% { transform: rotate(-360deg)scale(1);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 0.5;}
}
#tmsg {position: absolute;
      font: normal 18px sans-serif;
      color: #ffffff;
         top:350px;
      left:18%;}
#prog {position: absolute;
      width: 100%;
      height: 3%;
      cursor: pointer;
         top:97%;

      margin:0px 0%;
border-radius: 0px;}
</style>
<divid="bj">
<div id="mplayer">
<svg id="ssvg" width="300" height="300" >
        <circle id="yuan" cx="150" cy="150" r="5" fill="#000000" />
</svg>
</div>
<divid="prog"></div>
<div id="tmsg">00:00 | 00:00</div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
   

<audio src="https://p4.t57.cn:8399/2017/jy/ok1/NCT.m4a" loop autoplay id="aud"></audio>

</div>
<script>

let sepan = () => {
        /* 彩虹颜色数组 */
        let colors = ['red','orange','yellow','green','cyan','blue','purple'];
        /* 获取svg宽高 */
        let ww = ssvg.getAttribute('width'),
                hh = ssvg.getAttribute('height');
        /* 处理svg宽高意外 */
        if(ww < 50) ww = 50;
        if(hh < 50) hh = 50;
        ssvg.setAttribute('width', ww);
        ssvg.setAttribute('height', hh);
        /* 圆心坐标和圆半径取svg宽高最短边值 */
        let c = r =ww > hh ? hh / 2 : ww / 2;
        let a = 360 / 7; /* 角度 : 圆周七等分 */
        yuan.setAttribute('cx',c); /* 小圆点圆心X坐标 */
        yuan.setAttribute('cy',c); /* 小圆点圆心Y坐标 */
        /* 用 for 循环依次绘制七个三角形 */
        for(j = 0; j < 7; j++) {
                let color = colors; /* 取颜色 */
                let a1 = a * j; /* 三角形等腰边1与圆周交点的角度 */
                let a2 = a1 + a; /* 三角形等腰边2与圆周交点的角度 */
                /* 下面使用余弦正弦函数分别获取交点1和交点2的XY坐标值 */
                let x1 = c + r * Math.cos(Math.PI / 180 * a1),
                        x2 = c + r * Math.cos(Math.PI / 180 * a2),
                        y1 = c + r * Math.sin(Math.PI / 180 * a1),
                        y2 = c + r * Math.sin(Math.PI / 180 * a2);
                /* 创建svg path元素 */
                let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                /* 设置 path d 路径属性值 */
                path.setAttribute('d', `M ${c} ${c} L${x1} ${y1} A ${c} ${c} 0 0 0 ${x2} ${y2} L${c} ${c}`);
                /* 设置 path 填充颜色 */
                path.setAttribute('fill', color);
                /* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */
                ssvg.insertBefore(path, yuan);
        }
};

sepan();/* 运行绘制彩虹伞函数 */

</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 = `
【慢四】朋友别哭

【慢四】朋友别哭 祖海

亚伦影音工作室

有没有一扇窗

能让你不绝望

看一看花花世界

原来像梦一场

有人哭

有人笑

有人输

有人老

到结局还不是一样

有没有一种爱

能让你不受伤

这些年堆积多少

对你的知心话

什么酒醒不了

什么痛忘不掉

向前走

就不可能回头望

朋友别哭

我依然是你心灵的归宿

朋友别哭

要相信自己的路

红尘中

有太多茫然痴心的追逐

你的苦

我也有感触

有没有一种爱

有没有一扇窗

能让你不绝望

看一看花花世界

原来像梦一场

有人哭

有人笑

有人输

有人老

到结局还不是一样

有没有一种爱

能让你不受伤

这些年堆积多少

对你的知心话

什么酒醒不了

什么痛忘不掉

向前走

就不可能回头望

朋友别哭

我依然是你心灵的归宿

朋友别哭

要相信自己的路

红尘中

有太多茫然痴心的追逐

你的苦

我也有感触

难得有几个真正的朋友

这份情

请你不要不在乎

有没有一扇窗

能让你不绝望

看一看花花世界

原来像梦一场

有人哭

有人笑

有人输

有人老

到结局还不是一样

有没有一种爱

能让你不受伤

这些年堆积多少

对你的知心话

什么酒醒不了

什么痛忘不掉

向前走

就不可能回头望

朋友别哭

我依然是你心灵的归宿

朋友别哭

要相信自己的路

红尘中

有太多茫然痴心的追逐

你的苦

我也有感触

有没有一种爱

能让你不受伤

这些年堆积多少

对你的知心话

什么酒醒不了

什么痛忘不掉

向前走

就不可能回头望

朋友别哭

我依然是你心灵的归宿

朋友别哭

要相信自己的路

红尘中

有太多茫然痴心的追逐

你的苦

我也有感触

朋友别哭

我一直在你心灵最深处

朋友别哭

我陪你就不孤独

人海中

难得有几个真正的朋友

这份情

请你不要不在乎

人海中

`;

/*变量 ：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(); });
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #006400, #006400, #ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #2F4F4F 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };

</script>

liumang 发表于 2023-11-18 21:41

漂亮的制作{:5_150:}

liumang 发表于 2023-11-18 21:57

问好亚伦影音工作室，欣赏舞曲的--朋友别哭，第一次听，不错

查看完整版本: 【慢四】朋友别哭 祖海[测试]