登录   注册

BadApple播放器使用教程【V20170122】

在线工具 xlch 2年前 (2016-10-29) 15864次浏览 8个评论 扫描二维码
文章目录[隐藏]

 

以下为V20170122版本最新视频教程

http://www.bilibili.com/video/av8153459/

 

 

以下为V20161029的旧教程仅供参考

写在前面

这个东西原型是明月浩空播放器。
本人很看不惯这种收费狗。之前还有免费版本。现在直接66块了。
这就不清真了。所以我就破了。
并且这不只是破了这么简单,我还会比他做的更好。并且永久免费!
播放器支持播放视频、外文歌词翻译

这个作品就是一个初中dog用业余时间写的!真的是一个初中dog!

项目地址?

播放器官网:http://www.badapple.top/

 

如何注册/登录?

新版本的播放器已经不是之前那种麻烦又baka的单独管理密码了,而是一个账户管理多个播放器了。

首先打开网站,会有很大的两个按钮,一个注册一个登陆。

嗯对,就是这样,点注册,注册账号后再登陆。so easy。如果你这都不会那么你应该用不上这个播放器。

新建一个播放器

这个就是新版的控制台了,为了演示我已经注册了一个新账号并登陆了。

首先先新建一个播放器(播放器创建后不可删除,但是可以自由修改/删除歌单等)

点击添加后,显示成功,就是添加好了,如果是其他消息,那么就是不成功。

点确定后页面会自动刷新,然后你就会在“我的播放器”里看到你刚刚添加的那个播放器。

点击后,就会出现这个播放器的配置界面。

ok了之后点保存,即可。

播放器默认添加了几个歌单,接下来就需要你去编辑他们了!

 播放器管理

之后来详细说一下管理界面。

 全局设置

备注名称:就是在控制台“我的播放器”里面显示的名称,没有实际作用。

强制手机开启:手机会默认关闭播放器,开启这个就会强制手机也打开播放器。

显示歌词翻译:外语歌词显示中文翻译

默认音量大小:0~100之间整数

默认专辑:就是默认播放第几个歌单咯

是否随机播放:是的话就是随机播放,否的话就是顺序播放

是否自动播放:如果为否那么每次都需要手动点一下播放按钮才会播放

是否显示歌词:在屏幕下方显示歌词

是否显示欢迎语:是的话就会在左上方显示一个Tips。

站点名称:在播放器内显示

 预览/代码获取

会给你加入网站的代码,以及播放器的预览。

 添加歌单

给这个播放器添加一个歌单

 歌单列表

显示这个播放器添加的歌单列表,点击后进入编辑

歌单管理页面预览

点开一个默认添加的歌单,好的,这个就是歌单管理页面了。

 歌曲列表

这个是可以拖动的哦~~

之后来看看这里的图标

点击编辑按钮后会进入编辑界面

歌曲来源和歌曲ID嘛,这个老司机都知道是什么意思。

歌曲类型:wy=网易 xm=虾米 qq=QQ音乐 bilibili=B站 url=外链
目前就支持这五个

注意,修改/拖动歌曲后请点击上方的保存按钮进行保存!!切记!!

点击配置的保存按钮只会保存配置,不会保存歌曲列表!

 配置

歌单名称:歌单的显示名称。
歌单作者:显示在歌单名称后面
外部文件目录(或地址):外部文件(如外链歌曲 ksc歌词)用的,网络(如网易 虾米)歌曲可以无视。
类型:可以指定这个歌曲列表的类型,下面会详细介绍
ID值:用于直接获取网易歌单 专辑之类的,下面会详细介绍

注意,修改/拖动歌曲后请点击上方的保存按钮进行保存!!切记!!

点击歌曲列表的保存按钮只会保存歌曲列表,不会保存配置项!

 配置——类型

可以直接套用网易云音乐的歌单、专辑、歌手唱的前50首歌曲。
具体:

首先打开一个歌单

箭头标的就是ID了,在等于号后面。
之后类型选择1_网易歌单

之后在下面填写刚刚获取的ID
点一下预览,这个列表里的歌曲已经是网易歌单里的歌曲了
其他的歌手、专辑同理

之后你会发现,你之前添加的歌曲不显示了
这是因为类型已经不是“手动添加”了
如果需要自己手动添加歌曲,请切换回“手动添加”

 缓存机制

如果每一次解析歌曲地址都去访问下API,会很不稳定,并且过于消耗服务器资源,所以采用了缓存机制。

这样可以让播放器加载的更快,并且减少服务器的压力。

目前缓存的资源有:网易歌曲 网易电台 网易歌单 网易歌词 网易歌手 网易专辑 QQ歌曲 QQ歌词 虾米歌词 虾米歌曲 图片主颜色

以上均可以手动清除缓存,清除按钮在控制台导航栏内。

添加网络歌曲

您可以很方便的搜索并添加歌曲,目前控制台已经增加了搜索歌曲,您无需去一个个填写ID了!

搜索添加

目前只支持网易云音乐的歌曲搜索,但是网易云音乐的歌曲已经很全了不是么,如果实在不行的话再去虾米或QQ音乐吧!

在编辑框内输入要搜索的名称,然后回车,就是这么简单√

搜索出来后点击添加按钮就会添加到列表里啦!

(注意:如果勾选了“添加歌曲时在前面添加作者”,就会把歌手名称一起添加上,如果没有勾选就不会添加。)

手动添加

好吧,如果你觉得搜索出来的东西不和你的胃口,那么可以手动填写网址。

目前支持【网易 虾米 QQ 网易电台】四种歌曲地址

直接复制歌曲地址粘贴到编辑框里,回车,就会自动解析歌曲名称 歌曲ID

 外链/本地歌曲 以及 KSC歌词

本功能不适合小白使用。小白请忽略吧。

先说明一下外链歌曲各字段:

歌曲名称:顾名思义就是歌曲名称咯。
作者名称:同上
专辑名称:同上
资源文件名称:歌曲/专辑图片等等的文件名称。

这里得提起上面写的“外部文件目录”了
资源文件都会从这个文件夹内读取:

外部文件目录/资源文件名称.mp3
外部文件目录/资源文件名称.jpg
外部文件目录/资源文件名称.lrc
外部文件目录/资源文件名称.ksc

mp3=歌曲文件
jpg=专辑图片
lrc=普通歌词
ksc=高级歌词

播放器会优先读取ksc,如果ksc没有再读lrc
默认播放器里内置了一个“空白世界”的歌单

如果是网络歌曲需要ksc歌词,只用写好外部文件目录即可。
资源文件名称就是歌曲名称咯。

New ~ B站视频添加

这个功能调用的是www.bilibilijj.com的解析功能。在此表示感谢!
这个功能主要是用来播放视频,如果没有放置视频播放代码则会解析歌曲
如果想要播放视频,需要一点点css&js基础。

添加视频

那么首先打开一个视频,并复制下A♂V号

之后如图填写

点击添加,就ok了~

在预览里,由于添加了视频代码,所以会播放视频

视频代码安放

前方高能!请小白们立刻闪开!!

首先你需要在合适的地方安放一个Video组件,并使用CSS以保证正常显示

<video id="BadApplePlayerVideo" class="myvideo" autoplay="autoplay" width="300" height="150">
啥破浏览器。。。</video>

之后,在Video组件组件下面加入JS代码

XlchPlayerVideo={
	//返回视频组件Jq
	get:function(){
		return $("#<a href="http://xlch.me/tag/badappleplayer" title="查看更多关于BadApplePlayer的文章">BadApplePlayer</a>Video");
	},
	//返回视频组件Dom
	getDom:function(){
		return $("#<a href="http://xlch.me/tag/badappleplayer" title="查看更多关于BadApplePlayer的文章">BadApplePlayer</a>Video")[0];
	},
	//显示视频要执行的代码
	show:function(){
		XlchPlayerVideo.get().show();
	},
	//隐藏视频执行的代码
	hide:function(){
		XlchPlayerVideo.get().hide();
		XlchPlayerVideo.getDom().pause();
	}
}

之后用CSS确保正常显示(这只是个示例,具体需要你们自己去修改!!!)

.myvideo{
position:absolute;
z-index:0;
top:0px;
left:0;
width:100%;
height:100%;
object-fit:fill;
}

部分视频/歌曲“获取资源失败”说明

小部分视频没有歌曲/视频解析,请到www.bilibilijj.com输入av号后点击创建,如下图:

后话

这个教程我也是一而再再而三的拖了几百年。。今天终于填坑了。
如果您觉得这个不错,请您赞助。本作品没有任何收费项目,您的赞助会让我有更大的动力去更新。


绚丽彩虹 , 版权所有丨如未注明 , 均为原创丨未经允许,禁止转载
喜欢 (92)
[pay3@xlch8.cn]
分享 (0)

您必须 登录 才能发表评论!

(8)个小伙伴在吐槽
  1. 彩虹大哥,你这个博客的源码,我想要。
    wyj8584911772017-11-25 04:35 Windows 7 | Chrome 55.0.2883.87
  2. 图片看不见啦,快想想办法
    小森2017-07-11 16:41 Windows 10 | Chrome 53.0.2785.104
  3. 乱码怎么办?我网站为gb2312,然后调用之后字乱码..
    冷小夜2017-05-20 17:51 Windows 7 | Firefox浏览器 53.0
  4. http://music.163.com/#/playlist?id=147386146 这个链接怎么添加进去啊
    打牌2017-05-19 20:33 Windows 7 | Chrome 57.0.2987.133
  5. 默默地支持绚丽~初二就能达到这种成就真的是不错呢٩(๑^o^๑)۶
    华梦2017-01-25 23:57 Linux | Chrome 53.0.2785.146
  6. (*@ο@*) 噢腻~ (・-・*)绚丽更新了 不错哟
    颜怡馨2016-12-03 00:40 Windows 7 | Chrome 50.0.2661.102
  7. 路过... :shock:
    xiaoC2016-11-18 21:25 Windows XP | Maxthon 浏览器4.0
  8. 喵喵喵,加视频的教程有空能不能写的详细些,大家都很期待呢 :grin:
    Soul2016-10-29 18:44 Linux | Safari浏览器 534.30