当前位置：首页 > news >正文

给自己的博客网站加上酷炫的初音未来音乐游戏？

news 来源：原创 2024/4/25 0:22:52

先前在某个Q群里有位网友发了个链接，一点进去，发现是个极度让人耳目一新的初音未来音乐网页游戏。为了让有幸看到这篇文章的看官也来体会下本人第一次玩时的激动，抛个链接——乐柔嘴巴。链接的具体地址是blog.eunji.cn/music/music.html。尽管这个页面实在让人上瘾，但是自己同样是个喜欢折腾博客网站的家伙，而这位仁兄是在一个博客网站下放的这个网页。自己就开始思量，可不可以在自己的的博客下www.lesliewong.cn也放个这样的游戏呢？这也很彰显自己的品格<(￣︶￣)>

于是自己也就开始开展A计划了。。。

A计划：无耻地直接盗链

鉴于乐柔嘴巴的链接就是一个静态地址，盗链真的是直接就手到擒来、屡试不爽的了。

将自己的博客主页上的“相册”字段对应的链接改成https://blog.eunji.cn/music/m...。

<a href="https://blog.eunji.cn/music/music.html">相册</a>

效果如下：

看！访问我的网站www.leslieowng.cn可以玩到如此新颖的游戏——

不过，过了不久，还是觉得有些不爽。自己还是有点控制欲的念头的，为什么自己的博客网站要跳转到人家的博客上去玩初音未来的音乐游戏，自己家里就不能玩吗？说白了——看见这个音乐游戏上头的地址栏的域名不是自己的就真心让人不爽。

不行！我要做到点我博客主页链接的时候仍然跳转到我的域名下——

于是，灵机一动下，有了B计划。

B计划：无耻地反向代理盗链

Nginx服务器具有很强的反向代理功能。通常那些大流量网站都借助Nginx服务器的反向代理功能将访问请求均匀地分配到内网的其他业务服务器进行处理，实现负载均衡功能，业务处理完毕后再通过Nginx服务器返送回去给请求者。

换个方向思考，如果我转发的不是自己内网的业务服务器，而是外网上别人的网站呢？请求者访问我的网站，我将这个请求转发到外网上别人的网站上，然后将他们返回的数据反馈给我的请求者。那么，对于我的请求者而言，他从头到尾都是访问我的网站，而不知道自己收到的数据其实是从另外的网站转发过来的。

在这样的逻辑下，结合这篇文章的指导——《利用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>。然而结果却是——

吖！自己顿时有点摸不着脑袋，然后回去看那篇《利用Nginx的反向代理克隆生成镜像网站——中间人攻击》，最后面作者提示道，“网站全站HTTPS之后，如果网站被克隆了，里面的域名被替换，那么将会因为域名与预期不符从而导致网站显示异常”，也就像上面的炮灰例子一样。自己代理的是一个https的页面，是搞不了Nginx反向代理中间人攻击的。。。话说这也让自己更理解到——Nginx反向代理用的最多的地方还是内网负载均衡，因为内网大都是用http来转发吧？！

自己折腾了这么久，得到的却是这样一个结果，是有几分泄气的。难道就没有办法了吗？难不成自己要一砖一瓦地仿照着写个这样的页面，那有多么可怕啊！难道就没有源码吗？自己可以直接拿来用——

接着，C计划开始筹划。。。

C计划：原作者源码魔改

自己发现在发这个乐柔嘴巴的Q群里有位网友还另外发了个同样的实例网站http://miku.iysheng.com/。界面如下：

现在总算找到了原作者了，原来是彩虹猫歌曲的作者写的，浏览了下他的网站，发现他还弄了好多很有趣的东西——（内心忽然鄙视自己这种可恶的伸手党）

另外，自己也把失败折腾过程和Q友执着的少年谈了谈，汗颜的是，没过不久他就把github上的开源镜像给我找到了（好吧，自己当时没想到去github搜一搜）链接如下：

https://github.com/HFIProgram...

自己真的是喜出望外，立马把上面的代码都给fork了下来。然而，使用这些源码发现，出来的效果是这样地。。。

而不是我想要的上面乐柔嘴巴的样子——

不过，既然自己都有了源码，照着人家乐柔嘴巴的样子依葫芦画瓢也就不是什么难事了。自己把源码研究了下，偷梁换柱一番终于实现了自己希冀的效果，配置前后对比如下：

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">点击 &amp; 拖动或者按任意键!</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;">点击 &amp; 拖动或者按任意键!</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计划完美实现——