听心 (经典版) - 魏佳艺
本帖最后由 亚伦影音工作室 于 2024-12-14 16:12 编辑 <br /><br /><style>#papa {
margin: 180px-300px;
width: 1164px;
height: 620px;
background:#000000 url('https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg')no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
display: grid;
place-items: center;
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 50%;
transform: translate(-50%);
top: 86%;
font:normal 3em 华文新魏;
color: #000080;
-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{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
#canv {display: block; position: absolute;width:100%; height: 200px; bottom: 0px; left: 0px;z-index:1 ; animation: sp 1s linear infinite;}
@keyframes sp {
0% { filter:hue-rotate(360deg)contrast(150%)brightness(100%); }
}
#bt{width: 200px; overflow: hidden; color: lightgreen; position: absolute; left:78%;top:13%;font-size: 15px; z-index: 9;}
</style>
<div id="papa">
<css-doodle id="mplayer">
:doodle {z-index:80 ;
@grid: 2 / 260px 60px;
position: absolute;
color: var(--color);
bottom: 87%;left: 75%;
--prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
}
/* 时间信息 : 左 */
@nth(1) {
@place: 10% 80%;
:after { content: var(--ttmsg1); }
}
/* 控制器 */
@nth(2) {
@size: var(--size);
@shape: windmill;
@place: 50% 35%;
background: var(--color);
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 80% 80%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 40% 80%;
@size: 100% 2px;
background: #bbb;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: var(--color);
}
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<div data-lrc="花潮lrc在线" id="lrc">花潮lrc在线</div>
<canvas id='canv' width="1200" height="250"></canvas>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/5a0e-audiofreehighqps/99/12/GMCoOR4JYQAeACAAAAKSuus2.m4a" autoplay loopcrossOrigin="anonymous"></audio>
<span id="bt">听心 (经典版) - 魏佳艺</span>
</div>
<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
});
mplayer.onclick = () => {
if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
if(clickIdx === 2) aud.currentTime = progChg;
}
mplayer.onmousemove = (e) => {
let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
mplayer.style.cursor = cursors;
if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
}
})();
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `听心 (经典版) - 魏佳艺
词：郭高见
曲：陈伟
编曲：李德奎
混音：潘君明
和声：夏初安
制作人：郜锦标
企划/统筹：吴聪聪
宣传推广：郜锦标/吴聪聪
艺人统筹：刘丹
OP：北京嘎嘎飙壹文化传媒有限公司
(此版本为正式授权翻唱作品)
闭上眼我想看见你
屏住了所有的呼吸
我怕你走错了轨迹
做了心跳的标记
在梦里总有个秘密
总是让我挥之不去
忍不住探索了心底
为何你摸索了离去
就算我说我爱你
就算我说我想你
你也不能听到我的心
依然停留在这孤寂里
我想再靠近你一点
我想再走近一点
让你能够听到我的心
什么时候也能把我想起
闭上眼我想看见你
屏住了所有的呼吸
我怕你走错了轨迹
做了心跳的标记
在梦里总有个秘密
总是让我挥之不去
忍不住探索了心底
为何你摸索了离去
就算我说我爱你
就算我说我想你
你也不能听到我的心
依然停留在这孤寂里
我想再靠近一点
我想再走近一点
让你能够听到我的心
什么时候也能把我想起
就算我说我爱你
就算我说我想你
你也不能听到我的心
依然停留在这孤寂里
我想再靠近一点
我想再走近一点
让你能够听到我的心
什么时候也能把我想起
让你能够听到我的心
什么时候也能把我想起`;
/*变量 ：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')) : (lrc.style.setProperty('--state','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); /*获得歌词数组*/
})();
</script>
<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(350,200,350,0);
ppColor.addColorStop(0.6, '#00ff00');
ppColor.addColorStop(0.4, '#00ff00');
ppColor.addColorStop(0, '#00ff00');
let ppNum = 1164;
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 * 1), height, 2, -audiheighteight);
ctx.fillRect(width / 2- (j * 1), height, 2, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 点播放器按钮和频谱，都能控制音乐暂停呢{:4_187:} 这个制作很漂亮，欣赏亚伦老师好帖{:4_199:} 下面的音频漂亮 欣赏了，不错不错{:4_187:} 学习学习，感谢分享 欣赏老师的佳作，点赞！
页:
[1]