- NyarukoPlayer 是一个为网页增加动态背景图和歌词音乐的基于 jQuery 的 JavaScript 脚本。
- 是一些背景视频的替代品,可以让流量少很多的同时保证清晰。
- 使用单独的 JSON 存储全局配置,包括:
- 图片与动画:每张背景图片的名称、尺寸、动画起始位置、动画结束位置。
- 脚本的参数:初始歌词语言、歌词偏移时间、标题栏歌词、主图片扩展名、WEBP支持、图片路径、音乐按钮图片路径、歌词文件路径、音频文件路径、音频语言限制、动画是否重播。
- 使用 Cookie 存储用户配置,包括:
- 可以指定某个语言环境下不加载背景音乐,允许使用 Cookie 临时禁用。
- 可以通过 Cookie 允许和禁用此脚本的功能(例如可以让用户在他们的流量计费设备上不加载这些图片和音乐)。
使用修改变量方式存储全局配置- 这项功能已经弃用,改为由 JSON 统一读取配置。
可以通过修改变量配置多个功能开关和各种资源路径。有控制台输出开关,方便调试。
- 加载时在顶部显示进度条和百分比。
- 加载错误等会在页面顶端给予用户提示。
- 加载完成之前过发生错误时不影响网页正常工作,将显示网页原本的背景图片。
- 每次动画执行前自动计算图片坐标,让图片能填满页面,而不产生拉伸和空白区域,并根据需要自动确定是否要执行当前动画。
- 自动识别浏览器是否支持 webp 格式图片,如果是则自动使用,否则自动加载 jpeg 或指定的其他格式图片。可以在配置中禁用 webp 及指定图片扩展名。
- 可以在配置中指定每张图片的运动方向,目前支持:
- 从左到右(L-R)
- 从右到左(R-L)
- 从上到下(U-D)
- 从下到上(D-U)
- 中心放大(C-B)
- 中心缩小(C-S)
- 以保持图片适配填充背景为优先,如果当前网页显示区域比例和图片比例相等,将不产生动画。
- 网页切到后台背景图片动画将自动暂停。
- 可以自动播放背景音乐,并允许用户通过按钮播放和暂停。
- 在被访问时可以由用户选择是否要播放背景音乐,并记住此设置一段时间。
- 可以识别 iOS Safari 的背景音乐策略,需要用户的响应,并在全局后台播放。
- 可以载入 .lrc 歌词并在底部同步显示。
- 可以配置歌词偏移时间。
- 页面切出后可在标题栏显示同步歌词并暂停图片动画。可以在配置中禁用。
- 可以载入双语言歌词,点击歌词可以切换原文歌词和译文歌词。可以在配置中指定初始显示的歌词。
- 歌词实时换词时有过渡动画,在网页被切到后台时自动取消过渡动画。
- 导入的库仅有一个 cookie 库。
- 所有的全局变量和方法名称都有统一的前缀,减少名称冲突可能。
- 有充足的回调方法。
- 创建一个 HTML5 网页,使用 UTF8 编码。
<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>
- 创建一个文件夹(这里以 indexfiles/ 为例),用于保存多媒体资源和配置。
- 在文件夹中新建一个 .json 文件,用于存储设定。
- 参考下面的 JSON 文件示例进行设定。
导入样式表:
<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>
创建载入进度条:
<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>
在自己的 js 中添加代码(不是 nyarukoplayer.js ),在网页加载完毕后初始化 NyarukoPlayer 。
$(document).ready(function(){
nyarukoplayer_init("indexfiles/nyaruko.json",true);
});
nyarukoplayer_init 接受两个参数:
- 第一个是 json 配置文件路径。
- 第二个是是否开启控制台输出,便于调试。
至此功能已经实现。
在自己的 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");
}
默认情况下图片动画区域会网页全屏显示,你可以通过修改 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);
在自己的 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 还没有加载完毕,将在加载完毕后再自动开始播放。不要执行两次这个方法。
[
{
"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秒。
]
]
]
请按照格式 [分:秒.分秒]原文歌词|中文歌词
进行书写,如果只有原文则只写原文,最后应以 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
., [email protected]@B6R9b@Y7;,uRE6bBBb@@@REbh .. ; 7.
:;@@,;@b99Rb@; .:@60bb; . T@3 7 7.
... 0;bT Yb696@RU;..ERGubb7c S7 ;, :
.,, 7BB;7669b; ;T;[email protected] ;. .
,. .;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