<html lang="zh-CN">
<head>
<meta charset="UTF-8">
创建并导入与之关联的 CSS 样式和 JS 脚本，例如：
<link rel="stylesheet" type="text/css" href="indexfiles/index.css" />
<script type="text/javascript" src="indexfiles/index.js"></script>
2.变更配置
创建一个文件夹（这里以 indexfiles/ 为例），用于保存多媒体资源和配置。
在文件夹中新建一个 .json 文件，用于存储设定。
参考下面的 JSON 文件示例进行设定。
3.导入相关文件和依赖
导入样式表：
<link rel="stylesheet" type="text/css" href="indexfiles/nyarukoplayer.css" />
导入依赖 Jquery：
<script type="text/javascript" src="indexfiles/jquery.cookie.js"></script>
Jquery 的 Cookie 库：
<script type="text/javascript" src="indexfiles/jquery.cookie.js"></script>
导入主脚本：
<script type="text/javascript" src="indexfiles/nyarukoplayer.js"></script>
4.创建所需 HTML 元素
创建载入进度条：
<div id="nyarukoplayer_loading">
<noscript>错误：页面没有成功运行，请允许 javascript 以获得最佳浏览体验。</noscript>
<div id="nyarukoplayer_loadingok">
Loading...
</div>
</div>
创建背景动画 div ：
<div id="nyarukoplayer"></div>
创建屏蔽 div ，防止右键图片另存为和图片拖曳：
<div id="nyarukoplayer_def"></div>
写入你的网页内容。
创建背景音乐和背景音乐开关按钮：
<div id="nyarukoplayer_audiodiv">
<audio id="nyarukoplayer_musiccontrol" autoplay loop>
</audio>
</div>
创建实时歌词显示 div ：
<div id="nyarukoplayer_lrc" name="点此可以切换歌词语言"></div>
5.初始化
在自己的 js 中添加代码（不是 nyarukoplayer.js ），在网页加载完毕后初始化 NyarukoPlayer 。
$(document).ready(function(){
nyarukoplayer_init("indexfiles/nyaruko.json",true);
});
nyarukoplayer_init 接受两个参数：
第一个是 json 配置文件路径。 第二个是是否开启控制台输出，便于调试。至此功能已经实现。
6.实现所需的代理方法(可选步骤)在自己的 js 中添加代码。可用的代理方法列表：
动画已就绪 nyarukoplayerCallback_AnimateReady = function(autoplay){}; autoplay: (bool)为配置文件中的设定。 动画开始 nyarukoplayerCallback_AnimateStart = function(){}; 动画结束 nyarukoplayerCallback_AnimateEnd = function(){}; 歌词结束 nyarukoplayerCallback_LyricEnd = function(){}; 设置已载入 nyarukoplayerCallback_ConfigurationLoaded = function(){}; 图片已载入 nyarukoplayerCallback_ImageLoaded = function(){}; 歌词已载入 nyarukoplayerCallback_LyricsLoaded = function(){}; 音乐语言屏蔽 nyarukoplayerCallback_MusicLanguageblock = function(){}; 音乐被禁用 nyarukoplayerCallback_MusicDisabled = function(){}; 出现错误 nyarukoplayerCallback_Error = function(msg){}; msg: (string)错误信息。 音乐播放 nyarukoplayerCallback_MusicPlay = function(){}; 音乐暂停 nyarukoplayerCallback_MusicPause = function(){};使用示例：
nyarukoplayerCallback_AnimateEnd = function() {
$("#titlebox").css("background","transparent");
}
7.更改布局(可选步骤)
默认情况下图片动画区域会网页全屏显示，你可以通过修改 nyarukoplayer.css ，来调整显示效果。
#nyarukoplayer 和 #nyarukoplayer_def 的定位和尺寸可以修改图片动画区域的定位。
变更 #nyarukoplayer 的 background url("bg.jpg") 为你自己的图片，它将在动画载入之前和动画结束之后显示一张静态图片。
变更 #nyarukoplayer_audiodiv 的 position 为 relative ，并将 html 中的 <div id="nyarukoplayer_audiodiv"> 移动到 <div id="nyarukoplayer_def"></div> 之中，可以修改音乐播放按钮的位置不再始终在页面右上方。
其他技巧
让切出网页后标题栏自动显示歌词
在自己的 js 中添加代码：
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
nyarukoplayer_titlelrc = true;
} else {
nyarukoplayer_titlelrc = false;
document.title = "神楽坂雅詩的个人网站 - 神楽坂雅詩的小世界"; //原来的网页名
}
}, false);
允许代码或用户在本地禁用/启用 NyarukoPlayer
在自己的 js 中添加代码：
function disablemedia() {
if ($.cookie("disable") == "true") {
nyarukoplayer_disable(false);
} else {
nyarukoplayer_disable(true);
}
}
准备好后先不要播放,等待指令再播放
在配置文件中设置 "autoplay":false 。
实现代理方法 nyarukoplayerCallback_AnimateReady(autoplay) 。
在准备就绪后，这个方法会被调用。
在适当的时候，执行 nyarukoplayer_playnow() ，将立即开始播放。
例如，以下写法与自动播放同理：
nyarukoplayerCallback_AnimateReady = function(autoplay) {
if (autoplay == false) { //如果设置的不是自动播放，
nyarukoplayer_playnow(); //就手动执行播放方法。
}
}
nyarukoplayer_playnow() 如果返回 false ，表示 NyarukoPlayer 还没有加载完毕，将在加载完毕后再自动开始播放。不要执行两次这个方法。
配置文件示例
JSON 配置文件示例
[
{
"cnlrc":true, //初始歌词语言，单语言请用 false 。
"lrctime":0.5, //歌词偏移时间，如果 lrc 歌词有时间偏差可以在此修正。
"titlelrc":false, //标题栏歌词，只设定初始值。可以通过在代码中改变智能化。
"imgtype":"jpg", //主图片扩展名，读取时会用此扩展名，例如 "1.jpg"。
"webp":true, //WEBP支持，如果检测到浏览器可用 webp ，则优先读取 webp 扩展名，例如 "1.webp"。
"replay":false, //动画结束后自动重播
"autoplay":true, //动画准备好后直接播放
"imgdir":"indexpage/", //图片路径(文件夹)，读取时会例如 "indexpage/1.jpg"。
"musicbtnimg":"indexpage/btn_audio.png", //音乐播放暂停按钮图片路径
"lrcfile":"indexpage/nyaruko.lrc", //歌词文件路径
"musicfile":"indexpage/nyaruko.mp3", //音频文件路径
"musicblock":"ja|en" //当浏览器为以下语言时，不播放音乐。多个语言用「|」分隔。
},
[
[
"1", //图片文件名，不要带路径和扩展名
2154,1080, //图片的准确尺寸（px）
"L","R",7.39 //动画从左(L)到右(R)进行，持续时间7.39秒。
],
[
"2", //实际指向文件基于上面的设置，将类似于 "indexpage/2.jpg"。
1920,1263,
"U","D",7.52 //动画从上(U)到下(D)进行，持续时间7.52秒。
],
[
"3",
1920,1560,
"U","D",7.08
],
[
"4",
1920,1080,
"C","B",4.00 //动画从中心(C)到放大(B)进行，持续时间4.00秒。
],
[
"5",
1920,2115,
"D","U",10.5 //动画从下(D)到上(U)进行，持续时间10.5秒。
]
]
]
LRC 歌词文件示例
请按照格式 [分:秒.分秒]原文歌词|中文歌词 进行书写，如果只有原文则只写原文，最后应以 END 设定结束点，END后不要再接歌词。
[00:00.00]这いよりますか？ 生のうねり！|要潜行於这股惊涛骇浪吗
[00:02.78]SAN値ピンチ SAN値ピンチ SAN値ピンチ SAN値ピンチ|SAN値!即将归零!SAN値!即将归零!
[00:15.16]谁だ？ 邪魔するな my my LOVE|是谁啊 别来干扰我的恋情
// 此处省略部分
[02:50.02]这いよりました！じゃあまた 来周！(破ッ)|还想潜行吗那么下周再会(哈!)
[02:56.00]『恋は浑沌の隷也』|『恋爱乃混沌之奴隶』
[02:57.00]歌：后ろから这いより队G //注：如果无双语歌词，将直接显示此条歌词
// 此处省略部分
[03:50.64]这いよりますか？ 生(せい)のうねり！(破ッ)|要潜行於这股惊涛骇浪吗(哈!)
[03:54.22]END //注：应设定结束点，END后不要再接歌词。
许可协议
MIT License.
,;;77;
... 7
.;;;, 7D
.7;. S
:: ;3;.,.
.. ..;:;T;,;;;;, :.
:. ,,,77TJ:,::;:;: .,,. .
: JY.;;Y;;:::;;;. ..:;. ..
: Jh;.:J;.,7:;;: ..:,;; ...
:. .3J7,7;.,:;;.:,::;..;;:;: ::
., cT;;JY;.:;:7,;7:;;;.;;:;; ..:;...
: .C;7vU17.:7;Y:777;:7,:7::;. ..:..:. ..,.
. . YJU77;Y,7c7;Y:..c;Y:;J;.;. : .:,.:.. 7::
xhTT7C97v7,.TTGZv7v:YJ7;;; ..;:::. .7; ;
, .7xuH7 @7. .7@@c;,;E77777; .:,,.,;7;v, ,
: :H1T . 7: ..;7Tc7777v777Ic,:: 7;, ;7 .:
; EYh ,.7vGhh3c7;;;;7;..: ,;.,TT;.,
, T7:CT. ;;; ::I@@R37UC3c77v: ., ;::7;.:
: :J .UUT;; . uH;@b .7I1SS. .,. 7T77;.
; .7 7IY ;@@BH:@B.@R .:T. .. ... :CJcJc7;:::.
. . .;. v;. @@BJYR Y@c .:.Z; . .... .T7vcITTcc;;;7
; :Z;;T;,:@Bu..;;JY ...Tv;, .;YUI7;;c
IYYcvc;:: .;;. ;H,:TT:.J3@B, :. ;.:7;77YYIvJv7;. ,.:;;;.
.b .,:v;:;::GE7cZuc;bR.7 ;b@U :. ,YcYJJTJ;cYcJYcv. 77.
:Y ;. ; 777;1@;:Y77u@b : ;bHG7;;;; .7TJ77Y;. . c:
. ;c ;: 37:@@b.ZSx7;@@D. YY ,.,,;7; .777;77; 7;
.;; 7 ;, ;cx,@YJ ;;CB@H.;Zv7IHUGZ;77 ;7;777 ;;
;..; ,; ;RT.,c.ZG6B6bB@@@bB@GU777 ;Y;77: ;
;: v;. .:, :: G1U@@BEb7x@6h0b9GDC, :;7 ;;,cc;
; .. .:,,;; ;@@bbb@bB1YDDHbRBB6T ;v; ; ;;7
., E@.b@B6R9b@Y7;,uRE6bBBb@@@REbh .. ; 7.
:;@@,;@b99Rb@; .:@60bb; . T@3 7 7.
... 0;bT Yb696@RU;..ERGubb7c S7 ;, :
.,, 7BB;7669b; ;T;UR3SR@.TTb ;. .
,. .;Y@3Bb9DUvhB@CG096@J ;U7 ..
. . 7J.@bRbBBbR@@@Rb@ 7:YU@
.: ..;;;;;:;vI;@HBBBDb@xR@.:U 6;T
:;,..:;;;;:::... .E;u07@S7TC,;B.76
.;;;;;;. . 3@ x7 RI YR
. G: :
.; .
.;...
;; .
;:.
;:.
::
;;;
;;;;
,;:7:
RS7
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
