今生相依来生相随(男声版)-落笔
本帖最后由 亚伦影音工作室 于 2024-12-10 20:17 编辑 <br /><br /><style>#papa{width: 1164px; height: 620px; margin-top:130px; 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/6600c3689f345e8d032ea733.jpg)0 0/100%100%,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: #00FF00;
margin: 0px 0px;
}
</style>
<div id="papa">
<audio id="aud"src="https://s2.ananas.chaoxing.com/sv-w9/audio/7e/99/38/82d15c3998cb3c04bbbb6fb2cdb4a529/audio.mp3" autoplay loopcontrols crossOrigin="anonymous"></audio>
<div class="lrc">
<ul id="ul">
</ul>
</div>
<canvas id='canvas' width="1164" height="250"style="position: absolute; left:0px; bottom:30px;"></canvas>
</div>
<script>
var lrc = `今生相依来生相随(男声版)-落笔
词：佳艺
曲：尚亿哥
【未经著作权人许可不得翻唱翻录或使用】
人人都说我们俩不是很般配
可知你在我心中是那么完美
不管别人有多反对我都会追随
一辈子就这一回我可不想后悔
想你想的夜不能寐都不觉得累
记得我们每次相逢都会喝醉
你依偎在我的身旁袒露着心扉
忘掉那些世事琐碎再来干一杯
那些是与非不管错与对
喝下了这一杯管它谁是谁
我们的爱情故事慢慢地回味
沉醉在你的怀里不舍撤退
那些痛与悲只要有你陪
每日每夜为你陶醉你是我宝贝
今生和你相依偎来生再相随
你在我生命里最珍贵
想你想的夜不能寐都不觉得累
记得我们每次相逢都会喝醉
你依偎在我的身旁袒露着心扉
忘掉那些世事琐碎再来干一杯
那些是与非不管错与对
喝下了这一杯管它谁是谁
我们的爱情故事慢慢地回味
沉醉在你的怀里不舍撤退
那些痛与悲只要有你陪`;
// 最开始获取到的歌词列表是字符串类型（不好操作）
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 = 70;
// 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 - 2,
meterWidth = 6, //width of the meters in the spectrum
gap = 2, //gap between meters
capHeight = 2,
capStyle = '#fff',
meterNum = 1164 / (6 + 2), //count of the meters
capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(10, 20, 10, 250);
gradient.addColorStop(0.2, '#ff0000');
gradient.addColorStop(0.8, '#00ff00');
gradient.addColorStop(1, '#00ff00');
// 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 * 10, cheight - (--capYPositionArray), meterWidth, capHeight);
} else {
ctx.fillRect(i * 10, cheight - value, meterWidth, capHeight);
capYPositionArray = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 10 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame);
}
renderFrame();
audio.play();
};
</script>
这个响应式频谱的演示，和长同步歌词的位置调配很协调呢。
制作也漂亮。欣赏亚伦老师好帖{:4_199:} 歌儿好听，色彩调配很棒，看这样的精美的帖子，真是美好视听享受{:4_199:} 欣赏老师的精美音画，点赞！
画面都很漂亮，就是播放器按钮太边上，玩手机的不行，要设置手机也是自动播放就好 制作真漂亮 好听好看 谢谢分享 赞！
{:4_204:}{:4_178:}{:4_199:}
页:
[1]