你的无情像穿肠毒药-李英
本帖最后由 亚伦影音工作室 于 2024-3-27 11:13 编辑 <br /><br /><style>#papa{width: 1164px; height: 620px; margin-top:120px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://pic.imgdb.cn/item/6600e87c9f345e8d03adc879.jpg)no-repeat center/cover,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;
}
.lrc {position:absolute;width: 700px;margin-left:0px; z-index: 6;
height: 450px;
border: 0px solid white; text-align: center;
overflow: hidden;margin: 50px 530px;
}
.lrc #ul {overflow: hidden;
transition: all 0.6s;
text-align: center;
}
.lrc #ul li {font-size: 20px;overflow: hidden;
font-family:华文新魏;text-align: center;
color: #cccccc;
filter:drop-shadow(#000 1px 1px 1px)drop-shadow(#000 1px 1px 1px);
height: 40px; font-weight: normal;
line-height: 30px;
}
.lrc #ulli.active{ transform:translate(20px,0px)scale(1.3);
color: #ffFF00;
margin: 0px 0px;
}
</style>
<div id="papa">
<audio id="aud"src="https://mp3.t57.cn:7087/kwlink_d.php?id=349983339.mp3" autoplay loopcontrols crossOrigin="anonymous"></audio>
<div class="lrc">
<ul id="ul">
</ul>
</div>
<canvas id='canvas' width="1164" height="300"style="position: absolute; left:0px; bottom:30px;"></canvas>
</div>
<script>
var lrc = `你的无情像穿肠毒药-李英
词：飘飘
曲：义恒
编曲：姜凯升
混音：Y 爱华
制作人：陈金文
OP：星汉马文化
今生能有幸把你遇到
以为找到了幸福的依靠
为你付出一切不求任何回报
可最后的结局出乎我意料
或许是你要求有点高
怎么做都达不到你想要
我咽下苦水强颜着欢笑
依然换不来一个深情拥抱
你的无情就像穿肠毒药
让我夜夜为你痛到睡不着
可回忆要怎么才能忘掉
对你死心我还做不到
你的无情就像穿肠毒药
偏偏对你痴情的我中了招
直到受伤才知是个圈套
原来你心里我并不重要
或许是你要求有点高
怎么做都达不到你想要
我咽下苦水强颜着欢笑
依然换不来一个深情拥抱
你的无情就像穿肠毒药
让我夜夜为你痛到睡不着
可回忆要怎么才能忘掉
对你死心我还做不到
你的无情就像穿肠毒药
偏偏对你痴情的我中了招
直到受伤才知是个圈套
原来你心里我并不重要`;
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#aud"),
ul: document.querySelector("#ul"),
container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData
}
result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > Time) {
return i - 1;
}
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment(); // 文档片段
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
let index = getIndex();
// 计算滚动距离
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
offset = minOffset;
};
if (offset > maxOffset) {
offset = maxOffset;
};
// 滚动
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
li.classList.add("active");
}
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>
<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 = 64;
// 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 = 1164 / (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, 300);
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();
};
</script> 又是一个漂亮的制作。欣赏亚伦老师好帖{:4_199:}
我评分没了，等攒出来再加吧。 欣赏。 这个的频谱更细腻，很赞{:4_199:}
页:
[1]