将近9年前我为typecho写的处女插。第一个作品总有些情结,说不更了还是忍不住修修补补。想当年HTML5尚未大行其道,Flash写的Audio Player在wordpress上以小巧的流线型设计,多达15项色彩定制和ID3标签及多曲目支持等风靡一时。时至今日其改装版仍见于国内外一些播客平台,随点击滑入耳际的旋律也成为站长们分享音乐の初情怀。
不过长江后浪推前浪,如今各种js特效加持的HTML5播放器一统江湖,反而flash倒成了稀有物。上个版本仅用默认的audio标签做替代也让我有点耿耿于怀,毕竟与flash版效果相差太大。所以发现mb.miniAudioPlayer后我眼前不禁一亮,这不就是HTML5版的Audio Player嘛?虽然列表模式和配色区块不太一样,但已经是我能找到的最接近的替换方案了。它使用经典的jPlayer核心,兼容性有相当保障。当然插件主体还是flash版用js方式智能嵌载,HTML5版会在苹果等平台下自动切换。
用法还是在文中写入[mp3]文件地址[/mp3](新版也加上了编辑器快捷按钮)。,号可隔开多个地址,|号隔开4种参数:autostart(自动播放)、loop(循环播放)、titles(曲名)和artists(艺术家名)。Flash和HTML5版均支持跨域读取ID3标签,一般像七牛等静态空间在根目录上传以下内容的crossdomain.xml文件即可开启跨域许可:
> domain="*"/> - >
动态主机请务必把*号改成唯一允许的自己的域名,以免造成安全问题。
单曲循环演示:
多曲连播演示:
另外现在插件内置的url地址加密功能也支持HTML5版了,大家可以放心引用本地mp3文件。当然各大音乐平台收录全面也一直有民间高手在四处打通API,但考虑到版权问题有时效性获取外链的方式依然不做内置,大家可以参考下文自己搜索。
Github上维护的云音乐API推荐:原MusicCafe改版提供网易、虾米和QQ音乐的真实地址跟踪,如访问https://music-api-jwzcyzizya.now.sh/api/get/song/netease?id=401722227看到的数据,其中参数netease可改xiami或qq,id用平台歌曲页面url中显示的即可。
还有Meting额外支持百度酷狗,但不再提供链接演示,有为typecho定制的APlayer插件可用。目前最全的应该是maicong/music,支持多达13个平台解析。
不敢说最后一版了,只要自己用就可能继续完善,等下次闪现归来吧!;)
Changlog
1.2.6
缺省调用miniAudioPlayer:
支持配色/列表/ID3/解密等;
增加编辑器按钮重整文件结构。
1.2.5
修正摘要输出与feed提示。
1.2.4
优化嵌载效率并修复bug;
支持中文url和配色重置;
增加缺省可用HTML5播放。
1.2.2
增加缺省显示下载设置;
修正Markdown摘要问题。
1.2.1
增加音量与缓冲等设置;
修正Markdown链接问题。
1.2.0
使用js嵌入支持参数传递;
增加选色设置和实时预览;
新增地址加密开关设置。
1.1.0
使用object嵌入改善兼容;
使用2.0b6内核支持多曲目;
支持颜色代码和链接替换。
1.0.0
实现mp3标签替换embed嵌入。
(Last modified: 2018-07-01 22:12)
老大,js回调有点问题,切换别的页面了,音乐还是没有停止
自从这个不能用了,我好像就没放过音乐了。
老大,为什么有些typecho 主题不支持呀,打开文章播放器不见了.再换成原主题,播放器就出来了.如何解决这个问题.再一个下载链接,如何实现加密
老大 出BUG了 你QQ多少啊
我用CDN转发的HTTPS 然后插件某些JS就无法加载了 我的主题JS没问题
用本地的js地址还有问题吗?插件中的源码经过特殊压缩可能CDN又做了什么处理影响了吧
两个放在一个文章,我都可以玩一天了。。。。
两个啥。。播放器?好吧 = =
大佬,请问可以设置列表循环吗?
多曲目下用loop参数应该就能循环了
你好,我写了loop=yes,只会单曲循环,可以列表循环码?
flash版可以列表循环,html5下确实只能单曲。。查了下貌似需要配jplayer插件,有时间的话未来版本我试试弄下
好的,谢谢大佬
咨询一下,开启最新的插件后显示以下错误是怎么回事?
(index):311 Uncaught TypeError: $(...).mb_miniPlayer is not a function
at HTMLDocument. ((index):311)
at c (jquery-1.9.1.min.js:3)
at Object.fireWith [as resolveWith] (jquery-1.9.1.min.js:3)
at Function.ready (jquery-1.9.1.min.js:3)
at HTMLDocument.H (jquery-1.9.1.min.js:3)
(anonymous) @ (index):311
c @ jquery-1.9.1.min.js:3
fireWith @ jquery-1.9.1.min.js:3
ready @ jquery-1.9.1.min.js:3
H @ jquery-1.9.1.min.js:3
测试了一下,在设置中取消勾选“使用缺省播放”后,就不会出现这个错误。勾选后就会有这个错误提示。
HTML5版播放器被错误的jquery声明干扰,应该是主题或别的插件问题你可以更换排查下
自动播放标签怎么写啊大佬,小白不懂
插件设置开头的示例代码,其中autostart=yes就是开启自动播放
为什么我博客启用了插件,文章页只显示一个链接。麻烦帮忙看一下http://music.anjonl.cn/108-Music/start.html
404,不过正文的[mp3]标签应该会被替换啊
能不能支持flac啊 用flac.js
flash版只能解码mp3,html5可以自己试下,需求小我就不折腾了 = =