天下过客 - 电影《镖人》主题曲
本帖最后由 杨帆 于 2026-3-6 16:08 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王嘉尔《天下过客》 (电影《镖人》主题曲)</title>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Wang+Xi+Zhi&family=Zhao+Meng+Fu&family=Ou+Yang+Xun&display=swap");
#papa{margin:30px 0;width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;left:calc(50% - 81px);transform:translateX(-50%);--bg1:url('https://pic1.imgdb.cn/item/69a98713a1838fcbddfc95a2.gif') no-repeat center/cover;--bg2:url('https://pic1.imgdb.cn/item/69a9875aa1838fcbddfc96cf.gif') no-repeat center/cover;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:var(--bg1),var(--bg2);border-radius:20px;box-shadow:0px 0px 0px 2px #000000,0px 0px 15px 15px #006000;overflow:hidden;position:relative;display:grid;place-items:center;user-drag:none;user-select:none;--state:running;--display:block;z-index:1}
#vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.8;mask:linear-gradient(to bottom,red 30%,transparent 51%,transparent);-webkit-mask:linear-gradient(to bottom,red 30%,transparent 51%,transparent);object-position:center;display:block}
.vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.5;object-position:center;mix-blend-mode:screen;display:var(--display)}
#mdiv{position:absolute;top:50px;right:50px;z-index:10;width:180px;height:180px;display:grid;place-items:center;filter:drop-shadow(0 0 10px #8A2BE2);animation:rot 3s linear infinite var(--state);transition:opacity 0.3s;cursor:pointer;pointer-events:auto;--bg1:url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif') no-repeat center/100% 100%;--bg2:url('https://pic1.imgdb.cn/item/69a995cfa1838fcbddfc9d9a.png') no-repeat center/100% 100%;overflow:hidden;z-index:1;background:var(--bg1),var(--bg2);}
#mdiv:hover{filter:unset !important;animation-play-state:paused !important}
#fullscreen{position:absolute;top:30px;left:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8}
#fullscreen:hover{font-style:italic}
#lrc{--state:running;--motion:cover2;--tt:2s;--bg:linear-gradient(45deg,#ff0000,#ff6600,#ffff00);position:absolute;z-index:6;left:5%;top:15%;transform:translateX(-50%);font:normal 2.5em "Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";font-weight:400;color:#8A2BE2;white-space:pre;writing-mode:vertical-lr;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(#FFFFFF 1px 0 0) drop-shadow(#FFFFFF 0 1px 0) drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);--rect:0 0 100% 0;--border:0 1px 0 0;--c2:#F5F5F5}
#lrc::before{position:absolute;content:attr(data-lrc);width:100%;height:100%;color:transparent;overflow:hidden;white-space:pre;animation-play-state:var(--state);background:var(--bg);clip-path:inset(0 0 100% 0);-webkit-background-clip:text;animation:var(--motion) var(--tt) linear forwards var(--state);clip-path:inset(var(--rect));border:0px groove var(--c2);border-width:var(--border)}
@keyframes cover1{to{clip-path:inset(0 0 0 0)}}
@keyframes cover2{to{clip-path:inset(0 0 0 0)}}
.dancer{position:absolute;width:250px;height:120px;right:1%;bottom:5%;opacity:1;z-index:8;cursor:pointer;display:var(--display);transition:.3s;rotate:-5deg;animation:flash 0.5s infinite alternate,shake 1s infinite}
#prog{position:absolute;left:30%;bottom:7%;z-index:18;appearance: none;filter:invert(100%) hue-rotate(300deg);background:brown;width:40%;height:5px;cursor:pointer;pointer-events:auto;display:var(--display)}
#prog::-webkit-progress-value{background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#prog::-webkit-progress-bar {background:hsla(120,100%,50%,0.3);}
#prog::-moz-progress-value{background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#prog::-moz-progress-bar{background:hsla(120,100%,50%,0.3);}
#tmsg{position:absolute;right:22%;bottom:7%;z-index:8;font:normal 13px sans-serif;color:#fff;display:var(--display)}
#ptxt{position:absolute;left:25%;bottom:7%;z-index:8;font:normal 13px sans-serif;color:#fff;display:var(--display)}
@keyframes shake{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes flash{to{filter:hue-rotate(360deg)}}
#ppcontainer{margin:auto;position:absolute;width:100%;height:100px;bottom:5px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 4px}
@keyframes breath{0%{filter:brightness(1)}50%{filter:brightness(1.2)}100%{filter:brightness(1)}}
.mLine{position:relative;margin:0 2px -1px 0;width:6px;min-height:6px;max-height:180px;background:linear-gradient(to top,#64b5f6,#1e88e5,#64b5f6);transition:var(--tst);animation:breath 2s ease-in-out infinite;box-shadow:0 0 4px rgba(30,136,229,0.5)}
.mLine::before{position:absolute;content:'';width:100%;height:3px;background:var(--line-border-color,snow);top:0}
.mLine:nth-of-type(odd) { background: linear-gradient(to top,#ff0000,#ff6600,#ffff00); }
</style>
</head>
<div id="papa">
<progress id="prog"></progress>
<div id="ptxt">0%</div>
<div id="tmsg">00:00|00:00</div>
<div id="img-border"></div>
<div data-lrc="" id="lrc"></div>
<span id="fullscreen">全屏欣赏</span>
<div id="ppcontainer"></div>
<video id="vid" src="https://cccimg.com/view.php/7f9f1d52f7c575953b6957576cd5d0b2.mp4" autoplay loop muted playsinline></video>
<video class="vid" src="https://upfile.mp3.wf/view.php/66ed12e3bbef7d9836f2bb1ef6334c55.mp4" autoplay loop muted playsinline></video>
<img class="dancer" src="https://s3.bmp.ovh/imgs/2025/12/29/35ae6387f7b5758c.gif" alt="" title='暂停'>
<div id="mdiv" title='暂停' ></div>
<audio id="aud" src="https://www.joy127.com/url/145408.mp3" loop autoplay playsinline></div>
<script>
var ypData=.map(val=>val*0.5);
var total=120,lines=[],idx,len,step;
for(j=0;j<total;j++){var el=document.createElement('span');el.className='mLine';ppcontainer.appendChild(el);lines.push(el)}
plusOrMinus=()=>Math.random()>0.5?1:-1;
output=(all,num)=>{if(num===0)return Array(all).fill(0);return Array(all).fill(0).map(item=>{const baseHeight=Math.random()*num*0.8;const offset=plusOrMinus()*num/4;let finalHeight=Math.ceil(baseHeight+offset);finalHeight=Math.max(finalHeight,6);finalHeight=Math.min(finalHeight,180);return finalHeight})};
(function update(){var ar=output(total,aud.paused?0:ypData);ar.forEach((a,k)=>{lines.style.height=ar+'px';if(a>120){const brightness=Math.random()>0.7?1.5:1;lines.style.filter=`brightness(${brightness})`}else{lines.style.filter='brightness(1)'}});window.requestAnimationFrame(update)})();
aud.addEventListener('timeupdate',()=>{idx=Math.floor(aud.currentTime/step)});
aud.addEventListener('canplay',()=>{len=ypData.length;step=aud.duration/len;const safeStep=Math.max(Math.min(step,0.2),0.1);papa.style.setProperty('--tst',safeStep+'s')});
</script><script>
const mdiv=document.getElementById('mdiv');
const aud=document.getElementById('aud');
const vids=document.querySelectorAll(',.vid');
const fullscreen=document.getElementById('fullscreen');
const papa=document.getElementById('papa');
const lrc=document.getElementById('lrc');
const dancer=document.querySelectorAll('.dancer');
mdiv.onclick=()=>{if(aud.paused){aud.play();vids.forEach(vid=>vid.play());dancer.forEach(item=>{item.style.setProperty('--display','')});mdiv.style.setProperty('--bg1','');mdiv.style.setProperty('--bg2','none');papa.style.setProperty('--bg1','');papa.style.setProperty('--bg2','none');papa.style.setProperty('--display','');mdiv.style.animationPlayState='running';lrc.style.setProperty('--state','running')}else{aud.pause();vids.forEach(vid=>vid.pause());dancer.forEach(item=>{item.style.setProperty('--display','none')});papa.style.setProperty('--bg1','none');papa.style.setProperty('--bg2','');mdiv.style.setProperty('--bg1','none');mdiv.style.setProperty('--bg2','');papa.style.setProperty('--display','none');mdiv.style.animationPlayState='paused';lrc.style.setProperty('--state','paused')}
mdiv.title=aud.paused?'播放':'暂停';dancer.forEach(item=>{item.title='Pause'})};
dancer.forEach(item=>{item.onclick=()=>mdiv.click()});
(function(){const lrcStr=`
天下过客 《镖人》电影主题曲
词：俞白眉/甘世佳
曲：唐汉霄
音乐制作人：于飞
演唱：王嘉尔
天下苍生皆过客
风猎猎 沙滚滚
天下劫局天下困
久居樊笼里 自在有几人
我来天下走一趟
胜几场 败几场
且把棋盘一朝扬
抛却纷扰后 策马向苍茫
天涯在后 流年在后
呼啸的时间也在我身后
浮光在后 烟霞在后
人间的万物都在我身后
天下有多大
一刀一马一地沙
人心有多大
三千世界 它都想吞下
天下有多大
一身一梦一霜华
人心有多大
寥寥几人 视线之外全放下
马蹄踏破寒波
长刀斩断尘锁
我早已 洗铅华 辞烟火
这山河 任我过 卧看星河万颗
梦在鞍上颠簸 身披月色一抹
忘却分寸 趁着酒热
野一次才算活过
天下苍生天下人
风猎猎 沙滚滚
天下劫局天下困
自在有几人
我问天下何所往
是长安 是心上
没了天下又何妨
醉倒白云旁
天下有多大
一骑一剑一平沙
心界有多大
掠过山丘 天地任我跨
天下有多大
一琴一瑟一伯牙
心界有多大
只装自由 其余都放下
天下是云帆
载得动少年孤勇
天下是清风
吹醒执念 方见真从容
天下是苍穹
容得下所有心动
天下是归鸿
飞往那片 无拘无束的空
天下有多大
一刀一马一地沙
人心有多大
三千世界 它都想吞下
天下有多大
一身一梦一霜华
人心有多大
寥寥几人 视线之外全放下
编曲：AMAJ孙叡/John Nathaniel/于飞
唢呐：向笛
古筝：丁雪儿
吉他：胖雪人
贝斯：韩久强
鼓手：孙钰 @SDL音乐团伙 X Studio
童声合唱：百合花开童声合唱团
童声指导老师：冯向青
和声：王筱海/鱼椒盐
配唱制作人：Isaac Han @8PEX COMPANY & TEAM WANG
立体声混音：John Nathaniel
全景声混音：张步若@RRS
立体声/全景声母带制作：Marc Theriault @Lelab Mastering
`;
let mKey=0;
let mFlag=true;
const averAdd=0.3;
let lrcAr=[];
const lrcTime=(ar)=>{const tmpAr=[];for(let j=0;j<ar.length;j++){if(j<ar.length-1){tmpAr=parseFloat((ar-ar).toFixed(1))}else{const avg=tmpAr.reduce((a,b)=>a+b)/tmpAr.length;tmpAr=parseFloat(avg.toFixed(1))}}
tmpAr.forEach((item,key)=>{ar=item});return ar};
const getLrcAr=(text)=>{const arr=[];const calcRule=;const lines=text.split('\n');lines.forEach(line=>{const geci=line.replace(/\d+[\.:]\d+([\.:]\d+)?/g,'').replace(/[\[\]\'\"\t,]s?/g,'').trim();if(!geci)return;const timeMatch=line.match(/\d+[\.:]\d+([\.:]\d+)?/g);if(!timeMatch)return;timeMatch.forEach(timeStr=>{const timeArr=timeStr.match(/\d+/g);let sec=0;timeArr.forEach((val,idx)=>{sec+=val*calcRule});arr.push()})});arr.sort((a,b)=>a-b);return lrcTime(arr)};
const showLrc=(time)=>{if(mKey>=lrcAr.length)mKey=0;const name=mFlag?'cover1':'cover2';lrc.innerText=lrcAr;lrc.dataset.lrc=lrcAr;lrc.style.setProperty('--motion',name);lrc.style.setProperty('--tt',time+'s');lrc.style.setProperty('--state',aud.paused?'paused':'running');mKey++;mFlag=!mFlag};
const calcKey=()=>{for(let j=0;j<lrcAr.length;j++){if(aud.currentTime<=lrcAr){mKey=j-1;break}}
if(mKey<0)mKey=0;if(mKey>=lrcAr.length)mKey=lrcAr.length-1;const time=lrcAr-(aud.currentTime-lrcAr);showLrc(time)};
lrcAr=getLrcAr(lrcStr);
aud.addEventListener('timeupdate',()=>{if(aud.paused)return;for(let j=mKey;j<lrcAr.length;j++){if(aud.currentTime>=lrcAr&&mKey===j){showLrc(lrcAr);break}
if(mKey>=lrcAr.length){mKey=0}}});
aud.addEventListener('pause',()=>{lrc.style.setProperty('--state','paused')});
aud.addEventListener('play',()=>{lrc.style.setProperty('--state','running')});
aud.addEventListener('seeked',calcKey);
showLrc(lrcAr)})();
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault()));
let fs=true;let fsTimer;
fullscreen.onclick=()=>{fs?(fullscreen.innerText='退出全屏',papa.requestFullscreen()):(fullscreen.innerText='全屏欣赏',document.exitFullscreen());fs=!fs};
papa.addEventListener('mousemove',()=>{clearTimeout(fsTimer);fullscreen.style.opacity='1';fsTimer=setTimeout(()=>{fullscreen.style.opacity='0'},3000)});
mdiv.onanimationiteration=()=>mdiv.style.setProperty('filter',`hue-rotate(${45+Math.random()*120}deg)`);
aud.ontimeupdate=()=>prog.value=aud.currentTime/aud.duration;
prog.onclick=(e)=>aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
aud.addEventListener('timeupdate',()=>{tmsg.innerText=toMin(aud.currentTime)+'/'+toMin(aud.duration)});
function toMin(val){if(!val)return '00:00';val=Math.floor(val);let min=parseInt(val/60);let sec=parseFloat(val%60);if(min<10)min='0'+min;if(sec<10)sec='0'+sec;return min+':'+sec}
aud.addEventListener("timeupdate",function(){var percent=aud.currentTime/aud.duration;var sp=600/100;var swidth=(percent*100*sp)+"px";document.getElementById("ptxt").innerText=((percent*100).toFixed(2))+"%"})
</script>
</body>
</html>
打得好厉害！这齿轮小播新颖，还有下面频谱，多元素制成音画，杨帆太棒啦！{:4_187:} 谢谢精彩分享，问好！{:4_204:} https://pic.rmb.bdstatic.com/bjh/251020/dump/60caa803578be425be2d1eb8220dc836.gif 画面体现了歌曲的主题，小播做得很漂亮，欣赏赞佩！{:4_204:}{:4_190:}
杨帆老师，您用AI制作的《天下过客——电影<镖人>主题曲》简直太惊艳啦！ 一听这歌曲，就仿佛被带入了那个热血豪情的武侠世界，古筝与电子鼓点完美融合，旋律激昂又富有感染力，每一句歌词都像是刀光剑影中的侠骨柔肠。 王嘉尔的演唱固然精彩，可杨帆老师制作的这个音画为这首歌曲更是增色不少，让这主题曲有了独特的灵魂。 在花潮论坛能欣赏到这样高品质的作品，真是我们的幸运。 真心感谢杨帆老师为我们带来如此美妙的音乐体验！祝您在马年里，身体健健康康，心情快快乐乐，继续用您的才华和创意，创作出更多令人惊叹的作品！ 欣赏杨帆版主的精彩作品！点赞！ 梦江南 发表于 2026-3-6 11:57
打得好厉害！这齿轮小播新颖，还有下面频谱，多元素制成音画，杨帆太棒啦！
谢谢江南鼓励，有空可以看一下{:4_187:} 也曾年轻 发表于 2026-3-6 12:12
谢谢年轻老师鼓励，祝开心{:4_190:} 霜染枫丹 发表于 2026-3-6 12:22
画面体现了歌曲的主题，小播做得很漂亮，欣赏赞佩！
谢谢枫丹鼓励，祝开心{:4_204:} 偶然~ 发表于 2026-3-6 12:52
杨帆老师，您用AI制作的《天下过客——电影主题曲》简直太惊艳啦！
谢谢偶然~兄弟雅评与鼓励，图片应该是电影片段，网上找的呦{:4_191:} 寒冬残荷 发表于 2026-3-6 13:22
欣赏杨帆版主的精彩作品！点赞！
谢谢寒冬残荷版主鼓励，祝开心{:4_204:} 小播和频谱都很漂亮，视频画面也很漂亮。好像暂停就直接换了个图片呢。
欣赏杨帆好帖{:4_199:} 红影 发表于 2026-3-6 19:23
小播和频谱都很漂亮，视频画面也很漂亮。好像暂停就直接换了个图片呢。
欣赏杨帆好帖
谢谢影子鼓励，祝开心{:4_204:} 杨帆 发表于 2026-3-6 18:21
谢谢偶然~兄弟雅评与鼓励，图片应该是电影片段，网上找的呦
开心幸福 杨帆 发表于 2026-3-6 21:59
谢谢影子鼓励，祝开心
问好杨帆，晚上好{:4_187:}
页:
[1]
2