給本身的博客網站加上酷炫的初音將來音樂遊戲？
先前在某個Q羣裏有位網友發了個連接，一點進去，發現是個極度讓人耳目一新的初音將來音樂網頁遊戲。 爲了讓有幸看到這篇文章的看官也來體會下本人第一次玩時的激動，拋個連接——樂柔嘴巴。連接的具體地址是blog.eunji.cn/music/music.html。儘管這個頁面實在讓人上癮，可是本身一樣是個喜歡折騰博客網站的傢伙，而這位仁兄是在一個博客網站下放的這個網頁。本身就開始思量，可不能夠在本身的的博客下www.lesliewong.cn也放個這樣的遊戲呢？這也很彰顯本身的品格<(￣︶￣)>javascript
因而本身也就開始開展A計劃了。。。php
A計劃：無恥地直接盜鏈
鑑於樂柔嘴巴的連接就是一個靜態地址，盜鏈真的是直接就手到擒來、屢試不爽的了。css
將本身的博客主頁上的「相冊」字段對應的連接改爲https://blog.eunji.cn/music/m...。html
<a href="https://blog.eunji.cn/music/music.html">相冊</a>
效果以下：java
![<img src="https://i.loli.net/2019/01/12/5c394f23de1d5.png" alt="1547223928655.png" title="1547223928655.png" />](/img/bVbnpNp?w=1129&h=743 "<img src="https://i.loli.net/2019/01/12/5c394f23de1d5.png" alt="1547223928655.png" title="1547223928655.png" />")
看！訪問個人網站www.leslieowng.cn能夠玩到如此新穎的遊戲——jquery
不過，過了不久，仍是以爲有些不爽。本身仍是有點控制慾的念頭的，爲何本身的博客網站要跳轉到人家的博客上去玩初音將來的音樂遊戲，本身家裏就不能玩嗎？說白了——看見這個音樂遊戲上頭的地址欄的域名不是本身的就真心讓人不爽。nginx
不行！我要作到點我博客主頁連接的時候仍然跳轉到個人域名下——git
因而，靈機一動下，有了B計劃。github
B計劃：無恥地反向代理盜鏈
Nginx服務器具備很強的反向代理功能。一般那些大流量網站都藉助Nginx服務器的反向代理功能將訪問請求均勻地分配到內網的其餘業務服務器進行處理，實現負載均衡功能，業務處理完畢後再經過Nginx服務器返送回去給請求者。web
換個方向思考，若是我轉發的不是本身內網的業務服務器，而是外網上別人的網站呢？請求者訪問個人網站，我將這個請求轉發到外網上別人的網站上，而後將他們返回的數據反饋給個人請求者。那麼，對於個人請求者而言，他從頭至尾都是訪問個人網站，而不知道本身收到的數據實際上是從另外的網站轉發過來的。
在這樣的邏輯下，結合這篇文章的指導——《利用Nginx的反向代理克隆生成鏡像網站——中間人攻擊》。本身也就在本身的一臺架設了Nginx的服務器上搗弄了。用<u>music.lesliewong.cn</u>這個域名來轉發那位仁兄的網頁。配置文件以下：
server {
listen 80;
server_name music.lesliewong.cn;
root /webser/www/musiz;
index index.php index.html index.htm;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location / {
proxy_pass https://blog.eunji.cn/music/music.html;
}
location ~ \.php$ {
fastcgi_pass php7-fpm:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
而後重啓本身的服務器，心想這下該大功告成了吧! 去地址欄裏滿心歡喜地輸入<u>music.lesliewong.cn</u>。然而結果倒是——
![<img src="https://i.loli.net/2019/01/12/5c395000513d2.png" alt="1547259824230.png" title="1547259824230.png" />](/img/bVbnpNq?w=639&h=737 "<img src="https://i.loli.net/2019/01/12/5c395000513d2.png" alt="1547259824230.png" title="1547259824230.png" />")
吖！本身頓時有點摸不着腦殼，而後回去看那篇《利用Nginx的反向代理克隆生成鏡像網站——中間人攻擊》，最後面做者提示道，「網站全站HTTPS以後，若是網站被克隆了，裏面的域名被替換，那麼將會由於域名與預期不符從而致使網站顯示異常」，也就像上面的炮灰例子同樣。本身代理的是一個https的頁面，是搞不了Nginx反向代理中間人攻擊的。。。話說這也讓本身更理解到——Nginx反向代理用的最多的地方仍是內網負載均衡，由於內網大都是用http來轉發吧？！
本身折騰了這麼久，獲得的倒是這樣一個結果，是有幾分泄氣的。難道就沒有辦法了嗎？難不成本身要一磚一瓦地仿照着寫個這樣的頁面，那有多麼可怕啊！難道就沒有源碼嗎？本身能夠直接拿來用——
接着，C計劃開始籌劃。。。
C計劃：原做者源碼魔改
本身發如今發這個樂柔嘴巴的Q羣裏有位網友還另外發了個一樣的實例網站http://miku.iysheng.com/。界面以下：
![<img src="https://i.loli.net/2019/01/12/5c3950944c262.png" alt="1547234325453.png" title="1547234325453.png" />](/img/bVbnpNt?w=1227&h=704 "<img src="https://i.loli.net/2019/01/12/5c3950944c262.png" alt="1547234325453.png" title="1547234325453.png" />")
如今總算找到了原做者了，原來是彩虹貓歌曲的做者寫的，瀏覽了下他的網站，發現他還弄了好多頗有趣的東西——（心裏突然鄙視本身這種可惡的伸手黨）
![<img src="https://i.loli.net/2019/01/12/5c3950cd63d22.png" alt="1547234782434.png" title="1547234782434.png" />](/img/bVbnpNV?w=2159&h=1194 "<img src="https://i.loli.net/2019/01/12/5c3950cd63d22.png" alt="1547234782434.png" title="1547234782434.png" />")
另外，本身也把失敗折騰過程和Q友執着的少年談了談，汗顏的是，沒過不久他就把github上的開源鏡像給我找到了（好吧，本身當時沒想到去github搜一搜）連接以下：
https://github.com/HFIProgram...
![<img src="https://i.loli.net/2019/01/12/5c3950faed03c.png" alt="1547235242065.png" title="1547235242065.png" />](/img/bVbnpOg?w=1564&h=903 "<img src="https://i.loli.net/2019/01/12/5c3950faed03c.png" alt="1547235242065.png" title="1547235242065.png" />")
本身真的是喜出望外，立馬把上面的代碼都給fork了下來。然而，使用這些源碼發現，出來的效果是這樣地。。。
而不是我想要的上面樂柔嘴巴的樣子——
![<img src="https://i.loli.net/2019/01/12/5c39512882022.png" alt="1547235494268.png" title="1547235494268.png" />](/img/bVbnpOr?w=932&h=564 "<img src="https://i.loli.net/2019/01/12/5c39512882022.png" alt="1547235494268.png" title="1547235494268.png" />")
不過，既然本身都有了源碼，照着人家樂柔嘴巴的樣子依葫蘆畫瓢也就不是什麼難事了。本身把源碼研究了下，偷樑換柱一番終於實現了本身希冀的效果，配置先後對好比下：
github源碼的index文件：
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="description" content="初音將來版本的經過點擊/觸摸播放聲音並出現變化圖案的互動內容。">
<title>Mikutap</title>
<link rel="apple-touch-icon" href="icon.png">
<link href="https://fonts.loli.net/css?family=Quicksand:400" rel="stylesheet">
<link charset="UTF-8" href="shared/sp/css/common.css" rel="stylesheet">
<link charset="utf-8" href="css/mikutap.css" rel="stylesheet">
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/pixi.js/3.0.11/pixi.min.js" type="text/javascript"></script>
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/gsap/1.19.1/TweenMax.min.js" type="text/javascript"></script>
<script charset="UTF-8" src="shared/js/common-2.min.js" type="text/javascript"></script>
<script charset="utf-8" src="js/mikutap.min.js" type="text/javascript"></script>
</head>
<body>
<div id="view"></div>
<div id="scene_top">
<h1>Mikutap</h1>
<div id="ng">
<p class="atten">十分抱歉<br>您的瀏覽器並不支持本頁面須要的特性</p>
</div>
<div class="ok">
<p id="bt_start"><a href="">!開始!</a></p>
</div>
<p id="bt_about"><a href="">*關於*</a></p>
<div class="ok">
<p class="attention">※請打開聲音並享受。</p>
</div>
<div class="ok">
<p class="tit"><strong>注意！搬運內容，原頁面(Origin Site): <a href="https://aidn.jp/mikutap">https://aidn.jp/mikutap</a></strong></p>
</div>
</div>
<div id="scene_loading">
<hr size="1" color="#fff"> </div>
<div id="scene_main">
<div class="set">
<p class="attention">點擊 & 拖動或者按任意鍵!</p>
<p id="bt_backtrack"><a href="">背景音樂: 開啓</a></p>
</div>
</div>
<div id="about_cover"></div>
<div id="about">
<div id="about_in">
<p class="close"><span id="bt_close">×</span></p>
<p class="con"> 聲音來源 <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x" target="_blank">Hatsune Miku</a> </p>
<p class="con"> 做者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>) </p>
<p class="link"> 靈感來源 <a href="http://patatap.com/" target="_blank">Patatap</a><br>(使人讚歎的網頁!)</p>
</div>
</div>
<div id="bt_back">＜返回</div>
<div id="bt_fs">□全屏顯示</div>
</body>
</html>
本身魔改後的music.html文件：
<!-- music.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="description" content="初音將來版本的經過點擊/觸摸播放聲音並出現變化圖案的互動內容。">
<title>MUSIC - 馬樹菌的博客驛站</title>
<link rel="apple-touch-icon" href="icon.png">
<link href="https://fonts.loli.net/css?family=Quicksand:400" rel="stylesheet">
<link charset="UTF-8" href="shared/sp/css/common.css" rel="stylesheet">
<link charset="utf-8" href="css/mikutap.css" rel="stylesheet">
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/pixi.js/3.0.11/pixi.min.js" type="text/javascript"></script>
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/gsap/1.19.1/TweenMax.min.js" type="text/javascript"></script>
<script charset="UTF-8" src="shared/js/common-2.min.js" type="text/javascript"></script>
<script charset="utf-8" src="js/mikutap.min.js" type="text/javascript"></script>
</head>
<body>
<div id="view"></div>
<div id="scene_top">
<h1>MUSIC</h1>
<div id="ng">
<p class="atten" style="font-weight: bold;">十分抱歉<br>您的瀏覽器並不支持本頁面面須要的特性</p>
</div>
<div class="ok">
<p id="bt_start"><a href="" style="font-weight: bold;">!開始!</a></p>
</div>
<!-- <p id="bt_about"><a href="">*關於*</a></p> -->
<div class="ok">
<p style="padding-top: 10px;font-weight: bold;">樂柔要唱歌啦</p>
<p class="attention" style="font-weight: bold;">※請打開聲音並享受。</p>
</div>
<!-- <div class="ok">
<p class="tit"><strong>注意！搬運內容，原頁面(Origin Site): <a href="https://aidn.jp/mikutap">https://aidn.jp/mikutap</a></strong></p>
</div> -->
</div>
<div id="scene_loading">
<hr size="1" color="#fff"> </div>
<div id="scene_main">
<div class="set">
<p class="attention" style="font-weight: bold;">點擊 & 拖動或者按任意鍵!</p>
<p id="bt_backtrack" style="font-weight: bold;"><a href="">樂柔的嘴巴: 開啓</a></p>
</div>
</div>
<!-- <div id="about_cover"></div>
<div id="about">
<div id="about_in">
<p class="close"><span id="bt_close">×</span></p>
<p class="con"> 聲音來源 <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x" target="_blank">Hatsune Miku</a> </p>
<p class="con"> 做者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>) </p>
<p class="link"> 靈感來源 <a href="http://patatap.com/" target="_blank">Patatap</a><br>(使人讚歎的網頁!)</p>
</div>
</div> -->
<div id="bt_back" style="font-weight: bold;">＜返回</div>
<div id="bt_fs" style="font-weight: bold;">☒全屏顯示</div>
</body>
</html>
具體說來後者的區別就是註釋掉了很多內容，換了下一些用詞——但，奏效就行(￣▽￣)ブ
（另外，相應的JS文件也進行一樣偷樑換柱的操做）
接着就把這一摞子的源碼都放在了本身的hexo博客後臺一個命名爲MUISIC的文件夾裏，並把本身博客主頁的「相冊」字段改成「音樂」字段且映射到MUSIC文件夾裏，最終再git到本身在github上的博客代碼倉庫。
(^__^) 嘻嘻……
大功告成！C計劃完美實現——
![<img src="https://i.loli.net/2019/01/12/5c39516768d74.png" alt="1547258339921.png" title="1547258339921.png" />](/img/bVbnpOz?w=1353&h=883 "<img src="https://i.loli.net/2019/01/12/5c39516768d74.png" alt="1547258339921.png" title="1547258339921.png" />")
參考文獻：
樂柔嘴巴
特別緻謝：
執着的少年
![<img src="https://i.loli.net/2019/01/12/5c395190d0461.jpg" alt="6.deer.jpg" title="6.deer.jpg" />](/img/bVbnpOJ?w=650&h=660 "<img src="https://i.loli.net/2019/01/12/5c395190d0461.jpg" alt="6.deer.jpg" title="6.deer.jpg" />")
- 1. 如何給博客加上音樂
- 2. 給本身的網站添加網易雲音樂歌單吧^ ^
- 3. 棋牌遊戲的靈魂—遊戲音樂、音效與配音
- 4. 上時代遊戲音樂的歷史
- 5. 遊戲音樂—遊戲的必備項
- 6. 給本身的網站加上HTTPS
- 7. 將來的發展藍圖—遊戲背景音樂
- 8. 超炫酷的網頁音樂 視頻 播放器
- 9. 給你本身的博客加個 Markdown
- 10. 博客園背景音樂添加
- 更多相關文章...
- • DTD - 來自網絡的實例 - DTD 教程
- • 服務器上的 XML - XML 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 如何給博客加上音樂
- 2. 給本身的網站添加網易雲音樂歌單吧^ ^
- 3. 棋牌遊戲的靈魂—遊戲音樂、音效與配音
- 4. 上時代遊戲音樂的歷史
- 5. 遊戲音樂—遊戲的必備項
- 6. 給本身的網站加上HTTPS
- 7. 將來的發展藍圖—遊戲背景音樂
- 8. 超炫酷的網頁音樂 視頻 播放器
- 9. 給你本身的博客加個 Markdown
- 10. 博客園背景音樂添加