将近9年前我为typecho写的处女插。第一个作品总有些情结,说不更了还是忍不住修修补补。想当年HTML5尚未大行其道,Flash写的Audio Playerwordpress上以小巧的流线型设计,多达15项色彩定制和ID3标签及多曲目支持等风靡一时。时至今日其改装版仍见于国内外一些播客平台,随点击滑入耳际的旋律也成为站长们分享音乐の初情怀。

ap_cover.jpg

不过长江后浪推前浪,如今各种js特效加持的HTML5播放器一统江湖,反而flash倒成了稀有物。上个版本仅用默认的audio标签做替代也让我有点耿耿于怀,毕竟与flash版效果相差太大。所以发现mb.miniAudioPlayer后我眼前不禁一亮,这不就是HTML5版的Audio Player嘛?虽然列表模式和配色区块不太一样,但已经是我能找到的最接近的替换方案了。它使用经典的jPlayer核心,兼容性有相当保障。当然插件主体还是flash版用js方式智能嵌载,HTML5版会在苹果等平台下自动切换。

AudioPlayer_v1.2.6_thumb.png

用法还是在文中写入[mp3]文件地址[/mp3](新版也加上了编辑器快捷按钮)。,号可隔开多个地址,|号隔开4种参数:autostart(自动播放)、loop(循环播放)、titles(曲名)和artists(艺术家名)。Flash和HTML5版均支持跨域读取ID3标签,一般像七牛等静态空间在根目录上传以下内容的crossdomain.xml文件即可开启跨域许可:

  1. <cross-domain-policy>
  2.     <allow-access-from domain="*"/>
  3. </cross-domain-policy>

动态主机请务必把*号改成唯一允许的自己的域名,以免造成安全问题。

单曲循环演示:

多曲连播演示:

Love Me Like You Do - Ellie Goulding
Love Me Like You Do - Ellie Goulding
La La La - Naughty Boy
Courtesy Call - Thousand Foot Krutch

另外现在插件内置的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个平台解析。

不敢说最后一版了,只要自己用就可能继续完善,等下次闪现归来吧!;)

attachment AudioPlayer_v1.2.6.zip (164.2 KB, 下载次数: 4766, 最后修改: 2018-06-27 18:31)

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)