撞入我心怀 歌手：黄文文 TO：樵哥哥
<style>
#bj{position: relative;width: 1400px;height: 766px; margin: 130px 0 50px calc(50% - 781px);;overflow:hidden;background:url('https://xlaj.cn/upfile/2025/04/12/bj.jpg')no-repeat center / cover;--state: paused;--opt: .2;border-radius: 1px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #0215d9; }
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 51%; transform: translate(-50%);top: 60%;font:300 2.6em 华文隶书;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: 85%; LEFT:33%;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: 500px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {width: 70px; height: 70px; 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:#eee;background:#06075a;box-shadow:0px 0px 0px 1px #999;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 5%;
}
#全屏{position: absolute;}
#退出{ position: absolute;opacity:0;}
</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-family:微软雅黑;
font-size: 18px;
color: #ccc;
font-weight:100;
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-size: 25px;
color: #3790d0;font-weight:100;
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://xlaj.cn/upfile/2025/04/12/ann.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
<audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w8/audio/70/92/87/b6565e50b0552829ac9f2be2bc4ae8fa/audio.mp3" 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 = `黄文文-撞入我心怀
作词：喻笙音社
作曲：黄文文
编曲：喻笙音社@漠心藤
混音：毅然音乐
和声、和声编写：黄文文
封面：喻笙音社
制作人；黄文文@喻笙音社
合唱团：毅然合唱团
牧野之上青草香
百花盛开迷人芬芳
月光之下的帐篷外
马琴送来了吉祥
雄鹰在天空翱翔
想起你健壮的臂膀
还有你像草原一样
无比宽广的胸膛
你唱草原天籁
被风撞入我心怀
心儿随着满天的歌声
飞出云边外
看无垠的草原
骏马追逐着云彩
情郎你的心上人永远
为你而等待
你唱草原天籁
滚烫了我的心怀
小脸红的鲜艳的花儿
等着你来采
这无垠的草原
美如画卷的风采
所有奔赴远方的客人欢迎你到来
歌词同步编辑：小辣椒
牧野之上青草香
百花盛开迷人芬芳
月光之下的帐篷外
马琴送来了吉祥
雄鹰在天空翱翔
想起你健壮的臂膀
还有你像草原一样
无比宽广的胸膛
你唱草原天籁
被风撞入我心怀
心儿随着满天的歌声
飞出云边外
看无垠的草原
骏马追逐着云彩
情郎你的心上人永远
为你而等待
你唱草原天籁
滚烫了我的心怀
小脸红的鲜艳的花儿
等着你来采
这无垠的草原
美如画卷的风采
所有奔赴的远方客人
欢迎你到来
你唱草原天籁
被风撞入我心怀
心儿随着满天的歌声
飞出云边外
看无垠的草原
骏马追逐着云彩
情郎你的心上人永远
为你而等待
你唱草原天籁
滚烫了我的心怀
小脸红的鲜艳的花儿
等着你来采
这无垠的草原
美如画卷的风采
所有奔赴的远方客人
欢迎你到来
谢谢欣赏
`;
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>
function btn1() {
document.getElementById('geci').style.display = 'block';
document.getElementById('dhgc').style.display = 'none';
}
function btn2() {
document.getElementById('geci').style.display = 'none';
document.getElementById('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_178:} 谢谢亚纶的精彩双歌词切换代码，小辣椒套用玩一个@亚纶 小辣椒朋友的代码玩得游刃有余啊！{:5_116:} 小辣椒 发表于 2025-4-13 21:18
谢谢樵哥哥的礼物，现在的翻唱是越来越好听了，为歌星点赞！
先听几遍再说话{:4_196:}{:4_172:}{:4_182:} 哇塞，这创意简直绝了。首先映眼帘的是一个顶天立地的超级大美女后背竟然印着山河，{:4_189:}夜色下草原上有俊马奔腾，这飘荡的歌声令人荡气回肠。那歌词真是撩拨得人美得不要不要滴{:4_358:}{:4_179:} 这个厉害，把各种功能都集中了。歌曲好听，背景漂亮。
欣赏亲爱的好帖，师兄收礼开心{:4_199:} 这种带着和声效果的歌儿，最喜欢了。谢谢小辣椒，好礼心里记下了。。{:4_190:}{:4_200:} 人物的身体上还装着风景，这真奇妙{:4_199:} 红影 发表于 2025-4-13 21:35
这个厉害，把各种功能都集中了。歌曲好听，背景漂亮。
欣赏亲爱的好帖，师兄收礼开心
最喜欢这种创意设计了，她把山河都刻印在美女的娇躯上了{:4_170:}和你的把歌词放在桥洞里有得一拼{:4_178:} 这歌词那是相当的美{:4_178:}大胆而泼辣，听着舒坦{:4_358:} 梦油 发表于 2025-4-13 21:29
小辣椒朋友的代码玩得游刃有余啊！
梦油晚上好，小辣椒是套用亚纶的代码的，纯套用玩一个{:4_205:} 樵歌 发表于 2025-4-13 21:38
最喜欢这种创意设计了，她把山河都刻印在美女的娇躯上了和你的把歌词放在桥洞里有得一拼{:4_178 ...
是啊，这样的制作真的太奇妙了呢{:4_187:} 樵歌 发表于 2025-4-13 21:30
先听几遍再说话
樵哥哥现在你对歌曲的敏感度已经很厉害了，听几遍，马上会了{:4_172:} 樵歌 发表于 2025-4-13 21:34
哇塞，这创意简直绝了。首先映眼帘的是一个顶天立地的超级大美女后背竟然印着山河，夜色下草原上 ...
樵哥哥你也是太有才了，居然听了一遍马上把脑子里面的想象都写出来了，脑子真的很灵哦{:4_178:} 红影 发表于 2025-4-13 21:35
这个厉害，把各种功能都集中了。歌曲好听，背景漂亮。
欣赏亲爱的好帖，师兄收礼开心
亲爱的，套用亚纶的代码的。只是修改了一下颜色和位置 樵歌 发表于 2025-4-13 21:36
这种带着和声效果的歌儿，最喜欢了。谢谢小辣椒，好礼心里记下了。。
应该先谢谢樵哥哥的礼物，{:4_179:} 红影 发表于 2025-4-13 21:37
人物的身体上还装着风景，这真奇妙
为这个歌曲找的图，自己以前收藏的 樵歌 发表于 2025-4-13 21:40
这歌词那是相当的美大胆而泼辣，听着舒坦
好听吧，只是音乐不够高音质，这个音乐是小风的，他找的我玩{:4_205:} 小辣椒 发表于 2025-4-13 21:48
亲爱的，套用亚纶的代码的。只是修改了一下颜色和位置
这个代码很有趣，有那么多选择呢{:4_187:}