完美搭配！周杰伦bgm+亚瑟爱情密码=帅哥选手

鍓嶈█鏈€杩戠數瑙嗗墽銆婄偣鐕冩垜锛屾俯鏆栦綘銆嬬殑涓€娈碉紝鏉庡鍐欑殑鐖辨儏瀵嗙爜璧扮孩鉂わ笍鈥嶐煍モ潳锔忊€嶐煍モ潳锔忊€嶐煍ワ紝绫讳技鐨勮〃鐧界鍣ㄦ瘡姣忓嚭鐜板勾鍦ㄧ壒瀹氭椂闂寸敾鍑犱釜鍦堬紙浣犵煡閬撹繖浜涙棩鏈熷悧锛夈€傚綋鍚勮矾澶т浆寮€濮嬩互鍚勭璇█銆佸悇绉嶇被鍨嬪彂甯冪埍鎯呬唬鐮佹椂锛屾垜杩欎釜椤剁骇CV宸ョ▼甯堣嚜鐒惰鍦ㄨ繖娴簛鐨勭幆澧冧腑鐐€€涓€鐣紝浜庢槸鍦ㄨ繖鑼尗浜烘捣涓粡鍘嗕簡鎴戠殑灞傚眰绛涢€塷cean锛岃繖涓埍鎯呭瘑鐮佹槸鎴戞寫鍑烘潵鐨勶紝瀵逛粬鍋氫簡涓€鐐瑰皬鏀瑰姩銆傛彃浠跺湴鍧€鍏充簬鎻掍欢锛氳繖涓彃浠朵綔鑰呬粠浠ｇ爜鐨勮搴︽槸娌″姙娉曠爺绌剁殑锛岃阿璋㈠ぇ瀹剁鏍戙€備綔涓哄疄鐜扮埍浠ｇ爜閰风偒鏁堟灉鐨勫墠绔紝灏ゅ叾鏄?D鏁堟灉鎵€鐢ㄧ殑鎶€鏈爤锛屽熀鏈兘鏄熀浜巘hree.js+ca鈥嬧€媙vas銆傝繖涓彃浠朵篃鏄娇鐢╰hree.js+canvas寮€鍙戠殑锛屽叿浣撳紑鍙戣繃绋嬪氨涓嶈繃澶氬垎鏋愪簡锛宑v宸ョ▼甯堝three.js涓嶆槸寰堝湪琛岋紝绗戞鎴戜簡馃槀鍏虫敞WebAudioAPI锛歐ebAudioAPI鎻愪緵涓€涓姛鑳藉己澶т笖閫氱敤鐨勭郴缁燂紝鐢ㄤ簬鎺у埗Web涓婄殑闊抽锛屽厑璁稿紑鍙戜汉鍛橀€夋嫨闊抽婧愬苟鍚戦煶棰戞坊鍔犳晥鏋溿€佸垱寤洪煶棰戝彲瑙嗗寲銆佸簲鐢ㄧ┖闂存晥鏋滐紙濡傚０鍍忥級绛夈€傚０闊宠窛绂汇€佸ぇ灏忋€佹尟鍔ㄧ瓑鏁堟灉鐨勫彲瑙嗗寲闇€瑕乄ebAudioAPI鐨勫府鍔╂帴鍙ｏ細杩欓噷绠€鍗曞垪鍑哄嚑涓彃浠朵娇鐢ㄧ殑鎺ュ彛銆傛洿澶氭帴鍙ｅ彲浠ュ幓MDN鏌ョ湅AudioListenerAudioListener鏄敤鍦烘櫙涓殑涓€涓櫄鎷熺洃鍚櫒琛ㄧず鐨勬墍鏈変綅缃拰闈炰綅缃煶鏁堛€倀hree.js绋嬪簭閫氬父浼氬垱寤轰竴涓狝udioListener銆傚畠鏄煶棰戝疄浣撴瀯閫犲嚱鏁扮殑蹇呴渶鍙傛暟锛屼緥濡侫udio鍜孭ositionalAudio銆傚湪澶у鏁版儏鍐典笅锛屼睛鍚櫒瀵硅薄鏄浉鏈虹殑瀛愬璞°€侰amera3D鍙樻崲琛ㄧず鍚€呯殑3D鍙樻崲銆侫udioLoader鐢ㄤ簬鍔犺浇涓€绫籄udioBuffer銆傞粯璁ゆ儏鍐典笅锛孎ileLoader>>鐢ㄤ簬鍐呴儴鍔犺浇鏂囦欢銆傦紙鐢ㄤ簬鍔犺浇宸ョ▼涓殑闊抽鏂囦欢锛堿udioAnalyser鍒涘缓涓€涓狝udioAnalyser瀵硅薄锛屼娇鐢ˋnalyserNode鏉ュ垎鏋愰煶棰戞暟鎹€傛彃浠剁殑鍔ㄧ敾鏁堟灉涓€寮€濮嬪氨寰堝畬缇庯紝婊¤冻瀹夎瑕佹眰銆傚幓鎺夎竟妗嗘洿鍔犲ぇ姘旓紱鎶奲gm褰撻搩澹版崲鎴愭垜鍛ㄦ澃浼︾殑鏇村姩浜猴紱鍛ㄦ澃浼︾湅涓嶆噦鍔犱釜姝岃瘝鏇存樉浜烘€у寲锛堝紑鐜╃瑧锛屾垜鍠滄杩欐牱锛夈€傚凡缁忔湁浜嗚窡闅忔棆寰嬪姩鐢绘晥鏋滅殑鎻掍欢銆備笉鏄幇鎴愮殑甯︽瓕璇嶇殑鎾斁鍣ㄥ悧锛熸€濊矾涓€锛氬疄鐜拌瘑鍒煶棰戞樉绀烘瓕璇嶇殑鏁堟灉锛岀被浼间簬瑙嗛鎾斁鏃舵樉绀哄瓧骞曠殑鏁堟灉銆傛槗閫氱櫨搴﹀緱鍒扮殑缁撴灉涓昏鍒嗕负涓ょ锛氫笂浼犺闊冲埌鏈嶅姟鍣紝鏈嶅姟鍣ㄤ娇鐢ˋPI鈥嬧€嬭В鏋愯闊筹紝杩斿洖鏂囨湰锛涗娇鐢ㄦ湰鏈篈PI鎴栧悇绉嶅簱璋冪敤娴忚鍣ㄩ害鍏嬮锛屽苟璇嗗埆璇煶杞枃鏈柟娉曘€傚湪鐜╃殑椤圭洰涓樉鐒朵笉閫傜敤锛屾柟娉?寤惰繜澶暱锛岃瘑鍒噯纭巼澶綆銆傛€濊矾浜岋細鈭氳幏鍙栨瓕璇嶏紝瀹炵幇姝岃瘝鍜岄煶棰戠殑鍚屾銆傝繖涓柟妗堟槸鍙鐨勩€傝幏鍙栨瓕璇嶏紝鍦ㄧ綉涓婃壘LRC鏍煎紡鐨勬瓕璇嶃€傚繀椤绘槸LRC鏍煎紡锛屾斁鍦ㄦ枃鏈閲岋紝璁剧疆涓洪殣钘?textareaid="lrc_content"cols="30"style="display:none">[ti:鑺辨捣][ar:鍛ㄦ澃浼[00:03.63]鑺辨捣[00:06.35]鍛ㄦ澃浼00:14.49]...[00:18.56]...[00:26.90]鑺卞紑渚濇棫[00:33.31]杩滄柟娓呮緢鐨勭埍[00:39.53]鎯呬荆鐩哥埍鍗存洿鍠滄[00:45.99]鎴戝綋鏃朵笉鎳傝繖浠界埍[00:51.55][00:52.50]浣犲枩娆㈢珯鍦ㄧ獥鍙颁笂[00:58.47]浣犳病鏈夊ソ涔呬笉鍥炴潵浜哰01:05.12]浜旈鍏壊鐨勪笘鐣岃鏌撴垚涓€鐗囩┖鐧絒01:12.18]妯＄硦鐨勬槸浣犵殑鐪兼唱[01:16.14][01:17.26]涓嶈浣犵寮€杩滄柟[01:23.65]鎬濆康鍙樻垚绐楀鐨勫ぇ娴疯繘涓嶅幓[01:29.82]鍘熻皡鎴戣鐖卞お蹇垚浜嗛樆纰峓01:36.24]鎵嬩腑鐨勯绛濋寰楀お蹇垜鏉ヤ笉鍙婅繑鍥瀃01:42.22][01:42.74]鎴戜笉鎯充綘绂诲紑鐪兼唱鏃犳硶铻嶅寲[01:48.96]鎴戝凡缁忕┛杩囬殰纰嶆垜绛夊緟閲嶆柊寮€濮媅01:55.51]澶╃┖鏄痵tillbright濂圭埍澶ф捣[02:01.79]鎯呮瓕琚墦璐ョ埍涓嶅啀瀛樺湪[02:09.83][02:34.80]浣犲枩娆㈢珯鍦ㄧ獥鍙颁笂[02:01.79]:41.14]浣犺繕娌℃湁濂戒箙涓嶅洖鏉ヤ簡[02:47.40]浜旈鍏壊鐨勪笘鐣岃鏌撴垚涓€鐗囩┖鐧絒02:54.66]瑜幓鐨勬槸浣犵殑鐪兼唱[02:59.87][03:0]0.24]涓嶆兂浣犵寮€杩滄柟[03:05.75]鎬濆康鍙樻垚绐楀鐨勬捣鎴戣繘涓嶅幓[03:12.16]鍘熻皡鎴戝お鏃╃埍鎴愰殰纰峓03:18.56]鎵嬩腑鐨勯绛濋寰楀お蹇洖涓嶆潵浜哰03:24.53][03:25.07]涓嶆兂浣犺蛋鐪兼唱鏃犳硶鎰堝悎[03:31.37]鎴戝湪绛夋柊鐨勫紑濮媅03:37.81]澶╄繕浜潃濂圭埍娴穂03:44.12]鎯呮瓕缈绘秾鎵撹触鐖卞凡涓嶅瓨鍦╗03:54.85]js璇绘瓕璇峷arlrc=document.getElementById("lrc_content").innerHTML;灏哃RC姝岃瘝瑙ｆ瀽鎴怞S瀵硅薄varoLRC={ti:"",//姝屾洸鍚嶇Оar:"",//姝屾墜al:"",//涓撹緫鍚嶇Оby:"",//姝岃瘝鍒朵綔浜簅ffset:0,//鏃堕棿琛ュ伩鍊硷紝鍗曚綅姣锛岀敤浜庤皟鏁存瓕璇嶇殑鏁翠綋浣嶇疆锛屽崟浣峬s:[]//姝岃瘝鏁扮粍{t:time,c:lyric}};functioncreateLrcObj(lrc){if(lrc.length==0)杩斿洖锛泇arlrcs=lrc.split('\n');//浣跨敤鍥炶溅鎷嗗垎鎴愭暟缁刦or(variinlrcs){//閬嶅巻姝岃瘝鏁扮粍lrcs[i]=lrcs[i].replace(/(^\s*)|(\s*$)/g,"");//鍘绘帀鍓嶅悗绌烘牸vart=lrcs[i].substring(lrcs[i].indexOf("[")+1,lrcs[i].indexOf("]"));//寰楀埌[]鐨刢ontentbetweenvars=t.split(":");//鍒嗛殧锛氬墠鍚庢枃鏈琲f(isNaN(parseInt(s[0]))){//涓嶆槸涓€涓€糵or(vari鍦╫LRC){if(i!="ms"&&i==s[0].toLowerCase()){oLRC[i]=s[1];}}}else{//鏄竴涓€紇ararr=lrcs[i].match(/[(\d+:.+?)]/g);//鎻愬彇鏃堕棿瀛楁锛屽彲鑳芥湁澶氫釜varstart=0;for(varkinarr){start+=arr[k].length;//璁＄畻姝岃瘝浣嶇疆}varcontent=lrcs[i].substring(start);//鑾峰彇姝岃瘝鍐呭for(varkinarr){vart=arr[k].substring(1,arr[k].length-1);//鑾峰彇[]涔嬮棿鐨勫唴瀹箆ars=t.split(":");//Separate:beforeandaftertextoLRC.ms.push({//Object{t:time,c:Lyrics}鍔犲叆ms鏁扮粍t:(parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),c:content});}}}oLRC.ms.sort(function(a,b){//鎸夋椂闂撮『搴忔帓搴弐eturna.t-b.t;});}createLrcObj(lrc);灏嗚В鏋愬悗鐨勬瓕璇嶅憟鐜板湪椤甸潰涓婂垱寤轰竴涓鍣ㄦ潵灞曠ず姝岃瘝浣跨敤JS灏嗘瓕璇嶅啓鍏ユ爣绛炬敞鎰忥細濡傛灉姝岃瘝鏄剧ず鏁堟灉鏄樉绀烘墍鏈夋瓕璇嶏紝杩欎竴姝ラ渶瑕侀珮浜樉绀哄綋鍓嶆瓕璇嶏紱濡傛灉鍙樉绀哄綋鍓嶆瓕璇嶏紝涓嶆樉绀哄叾浠栨瓕璇嶏紝杩欐鍑芥暟鍙互鐪佺暐showLRC(){vars="";for(variinoLRC.ms){//閬嶅巻ms鏁扮粍锛屽皢姝岃瘝娣诲姞鍒板垪琛ㄤ腑s+='

'+oLRC.ms[i].c+'

';}document.getElementById("姝岃瘝").innerHTML=s;console.log(s)}showLRC();JS瀹炵幇姝岃瘝鍜岄煶涔愬悓姝ユ挱鏀剧殑婊氬姩鏁堟灉CSS.lyric_area{/*姝岃瘝鏄剧ず鍖哄煙*/height:300px;/*姝岃瘝鍖虹殑楂樺害*/overflow:hidden;/*闅愯棌澶氫綑鐨勯儴鍒?/margin-top:15px;}#lyric{/*姝岃瘝鍒楄〃*/line-height:20px;/*琛岄珮锛岃繖涓€艰鐢ㄥ湪姝岃瘝鐨勬粴鍔ㄨ窛绂讳笂*/transition-duration:600ms;/*婊氬姩閫熷害*/}#lyric.lineHigh{/*highlightline*/color:red;}JSvarlineNo=0;//褰撳墠琛寁arC_pos=6;//C浣峷aroffset=-20;//婊氬姩璺濈锛堝簲绛変簬琛岄珮锛塿araudio=document.getElementById("audio");//Playervarul=document.getElementById("lyric");//姝岃瘝瀹瑰櫒鍒楄〃//楂樹寒鏄剧ず褰撳墠琛屾瓕璇嶅拰鏂囨湰婊氬姩鎺т欢锛岃鍙蜂负lineNofunctionlineHigh(){varlis=ul.getElementsByTagName("li");//姝岃瘝鏁扮粍if(lineNo>0){lis[lineNo-1].removeAttribute("绫?quot;);//鍘绘帀涓婁竴琛岀殑楂樹寒鏍峰紡}lis[lineNo].className="lineHigh";//楂樹寒褰撳墠琛?/鏂囨湰婊氬姩if(lineNo>C_pos){ul.style.transform="translateY("+(lineNo-C_pos)*offset+"px)";//鏁翠綋鍚戜笂婊氬姩鍒颁竴琛岄珮搴}//鍥炴粴鍒板紑澶存挱鏀剧粨鏉焒unctiongoback(){document.querySelector("#lyric.lineHigh").removeAttribute("class");ul.style.transform="translateY(0)";lineNo=0;}//鐩戝惉鎾斁鍣ㄧ殑timeupdate浜嬩欢锛屽疄鐜版枃瀛楀拰闊抽鎾斁鐨勫悓姝udio.ontimeupdate=function(){if(lineNo==oLRC.ms.length)return;varcurTime=audio.currentTime;//鎾斁鏃堕棿if(parseFloat(oLRC.ms[lineNo].t)<=curTime){lineHigh();//楂樹寒鏄剧ず褰撳墠琛宭ineNo++;}};//鐩戝惉鎾斁鍣ㄧ粨鏉熶簨浠讹紝鍥炴粴姝岃瘝audio.onended=function(){goback();//鍥炴粴姝岃瘝};鍗曞彞姝岃瘝鍒囨崲鏁堟灉varlineNo=0;//褰撳墠琛寁araudio=document.getElementById("auo");//鎾斁鍣?/鍥炴粴鍒板紑澶达紝functiongoback(){//document.getElementById('lyric').innerText='Huahai'lineNo=0;}//鐩戝惉鎾斁鍣ㄧ殑timeupdate浜嬩欢,瀹炵幇鏂囧瓧鍜岄煶棰戞挱鏀剧殑鍚屾audio.ontimeupdate=function(){if(lineNo==oLRC.ms.length)return;varcurTime=audio.currentTime;//鎾斁鏃堕棿if(parseFloat(oLRC.ms[lineNo].t)<=curTime){//姝岃瘝鍒囨崲鏁堟灉document.getElementById('lyric').innerText=oLRC.ms[lineNo].clineNo++;}};//鐩戝惉鎾斁鍣ㄧ殑缁撴潫浜嬩欢锛屾挱鏀剧粨鏉熻繑鍥炴粴鍔ㄦ瓕璇峚udio.onended=function(){goback();//鍥炴粴姝岃瘝};闂鎻掍欢鏈韩浣跨敤鐨勬槸webaudioapi鍔犺浇鐨勯煶棰戯紝鑰屾瓕璇嶆槸璺熺潃闊抽鏄剧ず璇诲彇audiotag锛岃繖涓よ€呮湁鍐茬獊锛屽埄鐢╳ebaudioapi涓殑灞炴€у彲浠ュ疄鐜版枃涓庨煶鐨勫悓姝ラ煶棰戞挱鏀俱€傝繖閲屾垜娌℃湁瀛︿範鍜岀粺涓€锛岃€屾槸浣跨敤audio鏍囩鏉ュ姞杞斤紝閬垮厤鍐茬獊銆傜偣鍑绘挱鏀惧悗锛屽皢闊抽缁戝畾鐨勯煶閲忛潤闊炽€備换浣曢渶瑕佷唬鐮佺殑浜洪兘鍙互鑷涓嬭浇棰勮锛堟垜鍦ㄨ繖閲岋級