情难断 (DJ沈念版) - 苏谭谭【频谱跨域】
本帖最后由 亚伦影音工作室 于 2025-4-5 13:48 编辑 <br /><br /><style>#papa{width: 1164px; height: 620px; margin-top:130px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow: hidden;transform:rotate(0deg);background:linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;}
#aud {position:absolute;margin-top:0px; margin-left:0px;z-index: 60;
display: block;
width:102%;clip-path: inset(20% 1% 20% 1%);filter:invert(100%);margin: 580px -14px;
}
#items{position: absolute;width: 100%; height: 100%;animation: slider 3s linear infinite ;position: absolute;left:0%;z-index: 4;background:url(https://pic.imgdb.cn/item/6600c3689f345e8d032ea733.jpg)no-repeat center/cover;z-index: 1;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
50% {opacity: 1;filter:hue-rotate(360deg)contrast(140%)brightness(100%);}to {opacity: 1;}}
.lrc{z-index: 20;
width: 800px;bottom:330px; left:430px;
height: 100px;
overflow: hidden;transform:perspective(100px)rotate(-12deg)rotateY(10deg);
display: block;position: absolute;
margin: 0 auto;}
.lrc #ullrc{
width: 800px;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:仿宋;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 35px;
color: #ffffff;}
</style>
<div id="papa">
<audio id="aud"src="https://s2.ananas.chaoxing.com/sv-w9/audio/1c/4b/65/4d905668868bf8681b2f13af9a1ae004/audio.mp3" autoplay loopcontrols crossOrigin="anonymous"></audio>
<div id="items"></div>
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
<canvas id='canvas' width="1164" height="300"style="position: absolute; left:660px; bottom:200px;z-index: 10;transform:perspective(400px)rotateY(40deg);width: 55%;"></canvas>
</div>
<script>
window.onload = function() {
var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(aud);
// we have to connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// analyser.fftSize = 164;
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// we're ready to receive some data!
var canvas = document.getElementById('canvas'),
cwidth = canvas.width,
cheight = canvas.height - 1,
meterWidth = 1, //width of the meters in the spectrum
gap = 1, //gap between meters
capHeight = 1,
capStyle = '#ffff00',
meterNum = 1200 / (1 + 1), //count of the meters
capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 20, 0, 250);
gradient.addColorStop(0.2, '#cccccc');
gradient.addColorStop(0.8, '#eeeeee');
gradient.addColorStop(1, '#ffff00');
// loop
function renderFrame() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var step = Math.round(array.length / meterNum); //sample limited data from the total array
ctx.clearRect(0, 0, cwidth, cheight);
for (var i = 0; i < meterNum; i++) {
var value = array;
if (capYPositionArray.length < Math.round(meterNum)) {
capYPositionArray.push(value);
};
ctx.fillStyle = capStyle;
//draw the cap, with transition effect
if (value < capYPositionArray) {
ctx.fillRect(i * 3, cheight - (--capYPositionArray), meterWidth, capHeight);
} else {
ctx.fillRect(i * 3, cheight - value, meterWidth, capHeight);
capYPositionArray = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 3 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame);
}
renderFrame();
audio.play();
};
items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');
</script>
<script >
var lrc = `情难断 (DJ沈念版) - 苏谭谭
词：陈金文
曲：凡间精灵
编曲：凡间精灵工作室
伴唱：小菲
混音：苏洲
统筹：米奇
外宣：李昕宇
监制：莫堂庆
制作人：凡间精灵
出品人：陈金文
出品：安徽汉马文化传媒有限公司
手捧泛黄照片
凝视你的笑靥
泪水模糊视线
回忆打湿心田
一句不再相见
我却愣在了原点
看着你渐渐走远
独自坐在窗前
流星划过夜空
伸出双手想把
坠落星辰抓住
心中定格的你
却被风吹乱记忆
想你念你你在哪里
如果时光真的真的能够倒流
我想回到曾经的温柔
如果往日深情你不曾忘却
求求你回到我身边
如果时光能够带回你的笑容
我情愿用一生停留
再牵牵过的手
再走走过的路
我的心只为你守候
独自坐在窗前
流星划过夜空
伸出双手想把
坠落星辰抓住
心中定格的你
却被风吹乱记忆
想你念你你在哪里
如果时光真的真的能够倒流
我想回到曾经的温柔
如果往日深情你不曾忘却
求求你回到我身边
如果时光能够带回你的笑容
我情愿用一生停留
再牵牵过的手
再走走过的路
我的心只为你守候
如果时光能够带回你的笑容
我情愿用一生停留
再牵牵过的手
再走走过的路
我的心只为你守候
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script> 这是首老歌了，歌名有点不记得了。 频谱可能延时30秒 这个斜频谱好看。欣赏亚伦老师好帖{:4_199:} 感觉歌词放频谱下面，斜度一致会漂亮的 欣赏同时点赞。
页:
[1]