如何使用Aplayer进行音乐播放
如何使用Aplayer进行音乐播放
本文最后更新于 52 天前,其中的信息可能已经有所发展或是发生改变。

网页播放器对于博客来说是一个非常装逼重要的模块。在博客中放一个歌单不但能展现自己的独特品味,还能有更好的浏览体验。就是想装逼。

上网冲浪的时候找到了这个插件hermit x,适用于wordpress的使用APlayer 前端播放器的插件。但我使用下来效果差强人意。乱码,搜不到歌曲等问题让我不得不寻找新的播放插件。

在一番搜寻下,我找到了Netease Music,这个插件使用方便简单,只需要插入一段简码就可以插入歌曲。

如:http://music.163.com/#/song?id=26270008

但它又有一个小小的问题,那就是第一次进入页面的时候不会显示播放器,而是显示一些乱码。

再一次刷新就会显示出播放器了。

这不是什么大问题,但总觉得很难受。我认为这是插件的问题,所以打算从根源上解决问题,这便有了下面这段折腾经历。

使用Aplayer

因为hermit x和Netease Music都是从第三方音乐平台获取资源进行音乐播放的,所以我大胆猜测问题出在第三方资源加载。事实证明这个猜测是错的。之前有提到过hermit x的前端用的是Aplayer,所以我打算直接使用Aplayer。

安装

github上下载Aplayer的文件,然后将APlayer.min.css和APlayer.min.js文件放到网站的wp-content的文件夹中。

使用

通过在文章中插入html来使用播放器,例如:

<link rel="stylesheet" href="https://ginka.top/wp-content/APlayer.min.css">
<script src="https://ginka.top/wp-content/APlayer.min.js"></script>

<div id='demo'></div>

<script>
    var demo = new APlayer
    ({
        element: document.getElementById('demo'),
        fixed: false,
        mini: false,
        audio: [
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
        	},
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
        	},
 ]
    });
    demo.init();
</script>

更改模式和样式通过直接更改参数来实现,为了方便我直接把参数放在下面了。

参数

名称默认值描述
containerdocument.querySelector(‘.aplayer’)播放器容器元素
fixedfalse开启吸底模式, 详情
minifalse开启迷你模式, 详情
autoplayfalse音频自动播放
theme‘#b7daff’主题色
loop‘all’音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
order‘list’音频循环顺序, 可选值: ‘list’, ‘random’
preload‘auto’预加载,可选值: ‘none’, ‘metadata’, ‘auto’
volume0.7默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
audio音频信息, 应该是一个对象或对象数组
audio.name音频名称
audio.artist音频艺术家
audio.url音频链接
audio.cover音频封面
audio.lrc详情
audio.theme切换到此音频时的主题色,比上面的 theme 优先级高
audio.type‘auto’可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType自定义类型,详情
mutextrue互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
lrcType0详情
listFoldedfalse列表默认折叠
listMaxHeight列表最大高度
storageName‘aplayer-setting’存储播放器设置的 localStorage key

来自Aplayer文档

歌词

如果只是播放器的话,上述步骤已经完成了。但Aplayer支持歌词功能,这就不得不折腾来玩玩了。最终效果如图。

Aplayer有三种方式添加歌词,分别是lrc文件,js字符串,html。我原本想用lrc文件来添加歌词的,但无奈我的lrc无法上传到wordpress中。于是我选择了利用js字符串的方式来添加歌词。

<link rel="stylesheet" href="https://ginka.top/wp-content/APlayer.min.css">
<script src="https://ginka.top/wp-content/APlayer.min.js"></script>

<div id='demo'></div>

<script>
    var demo = new APlayer
    ({
        element: document.getElementById('demo'),
        lrcType: 1,
        fixed: false,
        mini: false,
        audio: [
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
                lrc: '[00:00]歌词\n[00:03]歌词',
        	},
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
                lrc: '[00:00]歌词\n[00:03]歌词',
        	},
 ]
    });
    demo.init();
</script>

添加方式并不难,通过js字符串添加只需要将lrcType设置为1就行了。如果是通过lrc文件则是3,html是2。值得注意的是,Aplayer仅支持以下几种歌词格式,其余格式无法识别。

[mm:ss]APlayer
[mm:ss.xx]is
[mm:ss.xxx]amazing
[mm:ss.xx][mm:ss.xx]APlayer
[mm:ss.xx]<mm:ss.xx>is
[mm:ss.xx]amazing[mm:ss.xx]APlayer

至此,便能通过Aplayer优雅的播放音乐了。不过第一次进入页面的时候还是不会显示播放器,而且这次连乱码都没有。白忙活了。再加上使用Aplayer的复杂程度远大于直接使用Netease Music插件,属实是妥妥的大失败了。

评论

  1. bigfa
    2 月前
    2024-8-22 17:07:38

    是因为你网站用了pjax 没加载静态资源导致的 😂

    • 博主
      bigfa
      2 月前
      2024-8-25 15:18:39

      多谢指点,问题煞那间灰飞烟灭。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇