给本身的博客网站加上酷炫的初音将来音乐游戏？
先前在某个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. 博客园背景音乐添加