设计两种歌词模式切换你一定喜欢
本帖最后由 亚伦影音工作室 于 2025-7-3 21:54 编辑 <br /><br /><style>#bj{position: relative;width: 1186px;height: 700px;MARGIN-LEFT:-300px;margin-top:0px;;overflow:hidden;background:url('https://pic1.imgdb.cn/item/68187d2458cb8da5c8dd7382.jpg')no-repeat center / cover;--state: paused;--opt: .2;border-radius: 1px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #800000; }
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 50%;font:300 2.8em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#mplayer { position: absolute; text-align: center; top: 90%; LEFT:40%;z-index: 60;color:#ffffff;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 400px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state);}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs{border-radius: 4px;position: relative;
color:#fff;background:#000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 70%;
}
</style>
<style>
#dhgc{position:absolute;width: 540px;
height: 450px;z-index: 6;
border: 0px solid white;cursor: pointer;
overflow: hidden;margin: 8% 10px;
}
.lrc {position:absolute;width: 100%;
height: 100%;
border: 0px solid white;
margin: 0px 0px;
}
.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0}
.lrc #ul li {
font:300 1.2em 微软雅黑;
color: #ccc;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;
height: 50px;
line-height: 35px;
}
.lrc #ulli.active{ font:450 1.6em 微软雅黑;
color: #CD6839;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>
<div id="bj">
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
<audio id="audio" src="https://aod.cos.tx.xmcdn.com/storages/9220-audiofreehighqps/32/C7/GAqhntALIQIxACAAAAM4nQ8M.m4a" loop autoplay></audio>
<div id="geci"></div>
<div id="dhgc"><div class="lrc" >
<ul id="ul">
</ul>
</div>
</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">bfq隐藏</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `别说相见不如怀念(Live 合唱版)
歌手：小小然
词：张国强 曲：小小然
别再说相见还不如怀念
那是自我安慰自我欺骗
这时光总在无情的流转
见一面真的会少一面
别再说相见还不如怀念
唯有这思念没有改变
人生这一别或许是永远
珍惜当下莫要留遗憾
最美的时光总是短暂
就像烟花绚丽一瞬间
以为来日方长还能相见
谁知一别就老了容颜
别再说相见还不如怀念
唯有这思念没有改变
人生这一别或许是永远
珍惜当下莫要留遗憾
亚伦影音工作室
别再说相见还不如怀念
那是自我安慰自我欺骗
这时光总在无情的流转
见一面真的会少一面
别再说相见还不如怀念
唯有这思念没有改变
人生这一别或许是永远
珍惜当下莫要留遗憾
别再说相见还不如怀念
唯有这思念没有改变
人生这一别或许是永远
珍惜当下莫要留遗憾
音乐来源：小辣椒
音画创意:亚伦
`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
function 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));
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
function getLrcAr(str) {
str = str.trim();
let lines = [], lrcAr = [];
let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
if(!str.match(reg)) return;
lines = str.replace(reg,'$1-{}-$2').split('\n');
for(k = 0; k < lines.length; k ++) {
lrcAr = [];
for(j = 0; j < 3; j ++) {
let tmpAr = lines.split('-{}-');
lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
}
}
return lrcTime(lrcAr);
};
function toSecs (lrcTime){
let reg = /\d{2,}/g;
let ar = lrcTime.match(reg);
return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};
function showLrc(time){
let name = mFlag ? 'cover1' : 'cover2';
geci.innerHTML = lrcAr;
geci.dataset.geci = lrcAr;
geci.style.setProperty('--motion', name);
geci.style.setProperty('--tt', time + 's');
geci.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
function myFunction(){
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (audio.currentTime - lrcAr);
showLrc(time);
};
function mylrc() {
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
}
audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());
</script>
<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#audio"),
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>
var geci = document.getElementById("geci");
var dhgc = document.getElementById("dhgc");
function btn1() {
geci.style.display = 'block';
dhgc.style.display = 'none';
}
function btn2() {
geci.style.display = 'none';
dhgc.style.display = 'block';
}
function btn3(){
var img=document.getElementById("mplayer");
if(document.getElementById("world").innerHTML=="bfq隐藏"){
mplayer.className="hide";
document.getElementById("world").innerHTML="显示bfq";
}else{
mplayer.className="";
document.getElementById("world").innerHTML="bfq隐藏";
}
}
function btnClick() {
var zs= document.getElementById("zs");
if (this.isFullscreen()) {
全屏.style.opacity= '1'; 退出.style.opacity = '0';
zs.style.cursor="ne-resize";
exitFullScreen();
} else {
全屏.style.opacity= '0'; 退出.style.opacity = '1';
zs.style.cursor="se-resize";
zs.style.visibility='visible';
if (zs.requestFullscreen) {
bj.requestFullscreen();
} else if (zs.webkitRequestFullScreen) {
zs.webkitRequestFullScreen();
} else if (zs.mozRequestFullScreen) {
bj.mozRequestFullScreen();
} else if ( zs.msRequestFullscreen) {
zs.msRequestFullscreen();
}
}
}
// 退出全屏
function exitFullScreen() {
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
// 判断是否全屏
function isFullscreen() {
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
</script>
欣赏佳作，问候亚伦。 这个切换十分方便，想用哪种就用哪种，真的太好了{:4_199:} 欣赏亚伦老师精美设计{:4_199:} 谢谢亚伦老师的新代码，很新颖，非常喜欢。
请问亚伦老师，为什么我换了一个MP3地址，klok歌词不显示。谢谢！
亚纶这个双歌词效果做的特别好{:4_199:} 这个我先收藏，套用玩一个 谢谢亚纶精彩的制作，赞的····{:4_178:} 小辣椒 发表于 2025-4-12 21:57
这个我先收藏，套用玩一个
等待您的作品，我套用没成功，向您学习。
老谟深虑 发表于 2025-4-13 11:23
等待您的作品，我套用没成功，向您学习。
代码发过来我看看！ 老谟深虑 发表于 2025-4-13 11:23
等待您的作品，我套用没成功，向您学习。
问好老谟，我刚发了你去看看 本帖最后由 老谟深虑 于 2025-4-14 11:19 编辑
小辣椒 发表于 2025-4-13 21:34
问好老谟，我刚发了你去看看
我看到了，我用你的代码也制作了一个音画，成功了。谢谢你！
亚伦影音工作室 发表于 2025-4-13 17:08
代码发过来我看看！
谢谢亚伦老师，我看到小辣椒套用你的代码制作的音画了，我用她的代码制作了成功了，谢谢老师了。
老谟深虑 发表于 2025-4-14 11:04
我看到了，我用你的代码也制作了一个音画，成功了。谢谢你！
好的，没事，我也是套用亚纶的代码做的
页:
[1]