《望爱却步》 - 于洋
本帖最后由 亦是金 于 2025-12-8 13:42 编辑 <br /><br /><div style="z-index: 32768;position: absolute;width: 1200px; height: 710px; margin-top:16px; margin-left:16px; box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 6px 16px #000079;overflow:hidden;border-radius:0%;background-image:url();background-size: 100% 100%;text-align: center;">
<DIV >
<video frameborder="0" style="LEFT: -10px; WIDTH: 1400px; POSITION: absolute; TOP: -50px; HEIGHT: 780px"src="https://video-qn.51miz.com/preview/video/00/00/67/35/V-673501-A38F58CA.mp4"autoplay muted loop="" controls="" > </video>
</DIV>
<div style="position: absolute; top:0px;LEFT: 0px;z-index: 12435;">
<style type="text/css">
#papa {}
#mplayer { position: absolute; width: 1200px; height: 140px; bottom: -710px;left:0px;display: flex;justify-content: center; align-items: flex-end;z-index: 20; }
.mLine { position: relative; margin: 0 1px 0 0; width: 8px; height: 8px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .55s; opacity:1; }
.mLine::before { position: absolute; content: ''; width: 100%; height:4px;border-radius:50%;filter:blur(0px)brightness(120%) drop-shadow(#fff000 0 0 6px)drop-shadow(#FFf000 0 0 6px); background: orange; top: -6px; }
</style>
<div id="papa">
<divclass="texiao"style="text-align: center;position: absolute;top:-100px; left:210px;z-index: 11;"/*歌词位置设置*/><divid="lrcArea"></div></div>
<div class="img_border" ><img id="aplay" style="width: 60px; height: 60px;mask: radial-gradient(transparent 10px,#red 10);background:url(https://www.emojiall.com/images/60/facebook/1f338.png)0px 0px/100% 100%;"/*光盘大小等设置*/></div>
<div class="texiao"id="mplayer"></div>
</div>
<audio id="aud" src="https://www.nly3355.cn/mp3/NzI1MzcwNTIma3dtcDM=.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),player_css: '',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight;let update = () => lines.forEach((item,key) => item.style.setProperty('height', Math.random() * data.ypData / divide + 'px'));aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();});};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;
HCPlayer({
ypData: ypData,
player_css: '--ww: 1200px; --hh: 110px; --pinpu: linear-gradient(to top,black,lightblue); align-items: flex-end;',
});
})();
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 56px ; padding: 0;list-style: none;}
#lrcArea{width: 1000px;
height: 200%;
overflow: hidden;filter:drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0);
display: block;margin: 0px -100px;}
#lrcArea ul{width: 100%;10px;
text-align: center;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 710px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:悟空大字库;
font-size: 0px;
color: #000000;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 38px;
font-family:悟空大字库;text-align: center;
color: #FF0000;
font-weight: bold; margin: 0px auto;}
/*mv动画*/
.img_border{display:inline-block;width:200px;height:200px;position: absolute;top:580px; left:60px;z-index: 4;}/*光盘位置设置*/
.img_border #aplay{border:0px solid #ffffff;border-radius:150%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
.z360z{animation:rotating 5s linear infinite;
}@keyframes rotating{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}/*光盘旋转方向设置*/
}
</style>
<style>
.texiao{margin: 0px auto;position: absolute;z-index:10;
display: block;
animation:rotat 6s linear infinite;}
@keyframes rotat{0%{
background-position: 0% 0%;filter:hue-rotate(360deg);transform:rotate(0deg)scale(1);
}
100%{
background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(0deg)scale(1);
}
}
</style>
<script id="lrc" type="text">
《 望 爱 却 步》 - 于洋
词：陈红卫
曲：轻云望月
编曲：冯丹
演唱：于 洋
LRC歌词编辑：亦是金
总想要找你问个清楚
到底这世上爱为何物
看过太多的相爱终被相负
爱你的话我顽强忍住
直到被思念销魂蚀骨
才知道自己错得离谱
还没真正开始就走到结束
谁能体会这揪心的痛楚
我这颗心已非你莫属
怪只怪我当初望爱却步
后悔没能牵手爱的旅途
哪怕只有一天我也知足
多想能和你朝朝暮暮
可惜如今却是天涯陌路
漫漫长夜受尽相思的苦
这是爱对我最狠的报复
总想要找你问个清楚
到底这世上爱为何物
看过太多的相爱终被相负
爱你的话我顽强忍住
直到被思念销魂蚀骨
才知道自己错得离谱
还没真正开始就走到结束
谁能体会这揪心的痛楚
我这颗心已非你莫属
怪只怪我当初望爱却步
后悔没能牵手爱的旅途
哪怕只有一天我也知足
多想能和你朝朝暮暮
可惜如今却是天涯陌路
漫漫长夜受尽相思的苦
这是爱对我最狠的报复
我这颗心已非你莫属
怪只怪我当初望爱却步
后悔没能牵手爱的旅途
哪怕只有一天我也知足
多想能和你朝朝暮暮
可惜如今却是天涯陌路
漫漫长夜受尽相思的苦
这是爱对我最狠的报复
这是爱对我最狠的报复
-- 谢谢欣赏 --
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {
if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {
that.play();
}, false);
this.player.addEventListener('pause',function() {
that.pause();
}, false);
//歌词索引
this.idx = 0;
},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? ' ' : c) + '\n';
});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);
}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {
li.className = 'cur';
}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {
return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);
}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');
},
//播放
play:function() {
this.stop = false;
var that = this,
player = this.player,
i,len;
this.t = setInterval(function() {
if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;
}
}
},300);
},
//暂停
pause:function() {
this.stop = true;
clearInterval(this.t);
},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);
});
return seconds;
},
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,
i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';
}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;
}
};
function g(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
function cEl(el) {
return document.createElement(el);
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function isEmptyObj(o) {
for(var p in o) return false;
return true;
}
function getOffset(el) {
var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {
left: left,
top: top
};
}
var p = new musicPlayer({
player: g('aud'),
lrc: g('lrc').innerHTML,
lrcArea: g('lrcArea')
});
</script>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);
</script>
</div>
<DIV style="HEIGHT: 50px"> 好漂亮的场景，有个这样的园子就太幸福了。 频谱漂亮，欣赏好帖。 转动的花环、歌词同步和变色频谱都很漂亮，这个帖子真棒。欣赏亦是金老师精美原创作品{:4_187:} 侃大山 发表于 2022-12-21 09:36
频谱漂亮，欣赏好帖。
谢谢老师欣赏！祝你欣赏愉快！{:4_176:} 红影 发表于 2022-12-21 09:40
转动的花环、歌词同步和变色频谱都很漂亮，这个帖子真棒。欣赏亦是金老师精美原创作品
谢谢老师欣赏点赞！祝你欣赏愉快！{:4_204:} 侃大山 发表于 2022-12-21 09:36
好漂亮的场景，有个这样的园子就太幸福了。
这是湖南 岳阳 君山岛内景-碑廊小筑的美景！是很漂亮的休闲之处！ 欣赏精彩的制作{:4_199:} 小辣椒 发表于 2022-12-21 12:51
欣赏精彩的制作
谢谢小辣椒老师欣赏鼓励！问好！{:4_204:} 亦是金 发表于 2022-12-21 15:28
谢谢小辣椒老师欣赏鼓励！问好！
千万别叫老师，叫小辣椒就可以了，你才是老师呢，样样都会{:4_199:} 小辣椒 发表于 2022-12-21 20:41
千万别叫老师，叫小辣椒就可以了，你才是老师呢，样样都会
小辣椒客气了，向你学习！有一问题向你请教，希望能得到你的回复！
我很喜欢你发表的“寂寞沙洲冷”帖子里的频谱，帖子中的歌曲地址有什么讲究？为什么用酷我等地址歌曲替换无效？你能把它制作成可用酷我等地址歌曲，歌词同步的的帖子分享吗？期待你的回复！{:4_204:} 亦是金 发表于 2022-12-21 09:51
谢谢老师欣赏点赞！祝你欣赏愉快！
问好亦是金老师，祝福安康{:4_187:} 问好红影老师！{:4_204:}
页:
[1]