如何在博客中添加Aplayer音乐播放器

前言

是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗。音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受。

我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有一些音乐一直是下架状态,办会员也听不了,所以只能自己搞个音乐播放器了。

在博客上的音乐播放器大多是那种Mini音乐播放器,虽然很便捷,但我一直觉得不够正式,音乐列表看起来也不够直观,所以我希望做到单独一个页面上。

本文讲解如何在博客中添加音乐播放器,播放自己的音乐,欢迎大家来我的音乐主页 echeverra,随时随地,想听就听。

Mini播放器效果:

单页面音乐效果:

教程

1.音乐插件

对比了几款音乐插件,我最终选定了Aplayer.js,因其界面美观,功能强大。音乐播放器的音乐信息,歌词,进度条,音量,顺序模式,循环模式都支持。可以使用三方音乐外链,也可以使用自己的音乐链接。

当然,由于一些限制,打开以上链接为概率性事件...

如果RP不足,您可以添加我的微信公众号 echeverra,回复"Aplayer"获取插件。

2.音乐资源

音乐资源可以从各大音乐平台下载,如果受会员或者下架限制,可以通过以下我常用的几个方式查找音乐。

由于我会将下载的音乐上传到自己的服务器(WordPress后台媒体),音乐文件太大时我的服务器属实吃不消(渣渣服务器),只好转换成较小的MP3格式,推荐使用WORTHSEE:https://audio.worthsee.com/

3.实现代码

将Aplayer插件APlayer.min.jsAPlayer.min.css上传到服务器,如果博客使用WordPress可上传到服务器wp-content目录下,通过链接https://IP/wp-content/Aplayer.min.js ,就可以访问到。

当然你也可以直接使用jsdeliver CDN方式,更快更方便,但不稳定,偶尔抽风...

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

Aplayer主要参数说明:

参数 默认值 描述
container document.querySelector('.aplayer') 播放器容器元素
fixed false 开启吸底模式
mini false 开启迷你模式
autoplay false 音频自动播放,一般浏览器默认会阻止音频自动播放
theme '#b7daff' 主题色
loop 'all' 音频循环播放,值:'all'、'one'、'none'
order 'list' 音频循环顺序,值:'list','random'
preload 'auto' 音频预加载,值: 'none', 'metadata', 'auto'
volume 0.7 默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效
showlrc true 歌词是否显示
audio - 音频,一个音频为对象格式,多个音频为数组格式
audio.name - 音频名称
audio.artist - 音频艺术家
audio.url - 音频链接
audio.cover - 音频封面
audio.lrc - 音频歌词
mutex true 防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器
listFolded false 列表是否先折叠
listMaxHeight - 音频列表最大高度

3.1 Mini播放器

Mini播放器会默认收起音乐列表,固定在界面左下角。

如果博客使用的是WordPress,在使用的主题设置中找到脚本一项,将代码写在脚本中即可执行。

你也可以将代码直接粘贴到IDE(记得设置编码格式<meta charset="utf-8">),在浏览器中打开也会可执行,代码实现如下:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<div id='aplayer'></div>

<script>
    var ap = new APlayer
    ({
        element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: {
            title: '半岛铁盒',
            author: '周杰伦',
            url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
            pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
        }
    });
    ap.init();
</script>

多首音乐时,audio值为数组形式,代码如下:

<script>
    var ap = new APlayer
    ({
        element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: [
            {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
            },
            {
                title: '给我一首歌的时间',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
            }
        ]
    });
    ap.init();
</script>

3.2单页面音乐

单页面音乐可以用更大的界面展示音乐列表等信息,实现也很简单,直接将代码块写在文章内容中,fixedmini改为默认值false,代码如下:

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

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

<script>
    var demo = new APlayer
    ({
        element: document.getElementById('demo'),
        showlrc: false,
        fixed: false,
        mini: false,
        audio: [
            {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
            },
            {
                title: '给我一首歌的时间',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
            }
        ]
    });
    demo.init();
</script>

在编辑器右侧可实时显示播放器效果。最终页面效果如下:

如果你想创建多个音乐播放器,就需要创建多个音乐播放器元素<div id="apalyer"></div>id设为不同值,然后实例化new多个Aplayer播放器,再配置每个播放器的音乐列表audio。参数mutex默认值true,即使多个播放器也不会冲突。

<div id='demo1'></div>
<div id='demo2'></div>
<script>
    var demo1 = new APlayer
    ({
        element: document.getElementById('demo1'),
        showlrc: false,
        audio: {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
            }
    });
    var demo2 = new APlayer
    ({
        element: document.getElementById('demo2'),
        showlrc: false,
        audio: {
                title: '给我一首歌的时间',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
            }
    });
    demo1.init();
    demo2.init();
</script>

需要注意<script>标签中的代码不能有空行,否则会报解析为<p>标签,造成js代码无法正确执行。

通常fixedmini需同时置为truefalse,否则会有显示异常的问题。

单页面音乐相比Mini音乐播放器可以展示更多的音乐信息,更加正式,但同样存在弊端,当博客切换界面后,背景音乐仍在后台继续播放,只能回到音乐页面暂停,Mini音乐播放器就不会有这种问题,它始终固定在页面左下角,不会随着页面切换退出或重新加载。

4. Meting三方音乐

当然我们也可以使用第三方音乐,需要引入另外一款js插件Meting.js,它是基于Aplayer封装好的插件,开箱即用。

CDN链接:

<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

Meting主要参数说明:

参数 默认值 描述
id require 歌曲ID/播放列表ID/专辑ID/搜索关键字
server require 音乐平台: netease, tencent, kugou, xiami, baidu
type require 类型:song, playlist, album, search, artist
auto options 音乐链接,支持,支持: netease, tencent, xiami
fixed false 开启吸底模式
mini false 开启迷你模式
autoplay false 自动播放,一般浏览器默认会阻止音频自动播放
theme #2980b9 主题色
loop all 音频循环播放,值:'all'、'one'、'none'
order list 音频循环顺序,值:'list','random'
preload auto 音频预加载,值: 'none', 'metadata', 'auto'
volume 0.7 默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效
mutex true 防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器
lrc-type 0 歌词类型
list-folded false 列表是否先折叠
list-max-height 340px 音频列表最大高度

可以看出Meting参数和Aplayer基本是相同的。

4.1单曲引入

我们使用网易云举例,单曲Blow Me a Kiss,链接:https://music.163.com/#/song?id=2526628

代码如下:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<meting-js server="netease" type="song" id="2526628"></meting-js>

server="netease"指定音乐平台为网易云,type="song"指单曲类型,id="2526628"为音乐的id,同链接上的id一致。

4.2歌单引入

我们使用网易云音乐里我创建的一个歌单,链接:https://music.163.com/#/playlist?id=7360465359

代码如下:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<meting-js server="netease" type="playlist" id="7360465359"></meting-js>

同样的server="netease"指定音乐平台为网易云,type="playlist"指歌单类型,id="7360465359"为歌单的id,同链接上的id一致。

4.3 Mini播放器

我们用Meting实现一个随机播放的Mini播放器,代码如下:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<meting-js 
    server="netease" 
    type="playlist" 
    id="7360465359"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

除了之前设置的server、type、id参数外,还设置Mini播放器的必要参数fixed="true", mini="true",随机播放order="random"

4.4博客园音乐引入

博客园是为数不多的可定制的博客平台,我们先在博客后台->设置->申请JS权限,大概一个小时时间,成功后在博客后台->设置->页脚 HTML 代码中粘贴上面4.3的案例,就可以生成Mini音乐播放器啦,是不是很简单~

博客园 首页 播放器效果:

优化

夜间模式

有粉丝反馈在博客夜间模式下,播放器音乐列表显示文字看不清的问题。

以我使用的博客主题为例,由于网站设置夜间模式后,会将所有文字颜色改为更适应夜间的颜色#eee,所以会有看不清的问题。

解决办法也很简单,我们只需要通过修改CSS样式覆盖掉播放器文字颜色即可,WordPress博客可以通过后台->外观->额外CSS中设定。

.aplayer * {
    color: #666;
}

封面放大

好吧,这个纯属个人强迫症,听着音乐,看着音乐封面太小,很不过瘾,于是将音乐封面改大了些,修改位置同上。

article .aplayer .aplayer-pic {
    position: relative;
    float: left;
    min-height: 100px;
    height: 100px;
    width: 100px;
    background-size: cover;
    background-position: 50%;
    transition: all .3s ease;
    cursor: pointer;
}
article .aplayer .aplayer-info {
    margin-left: 100px;
    padding: 30px 7px 0 10px;
    height: 100px;
    box-sizing: border-box;
}

是不是看着舒服多了~

性能优化

偶然一天我打开音乐界面,发现有点卡,查看网络请求才发现,默认加载了几首音乐资源,脆弱的服务器简直不堪重负...

如果你使用的自己服务器的音乐资源,或者在一个页面上有多个音乐播放器,建议关闭音频预加载参数preload,因为真的会很卡,页面加载也会慢很多,直接将preload设置为'none'即可。

上下曲功能

默认播放器无法通过左右方向键控制上一首/下一首,通过js键盘监听事件调用Aplayer API可以实现此功能。

document.addEventListener('keydown', function(e) {
  // 上一首
  if(e.keyCode == 37) {
    for(var i in apList) {
      ap.skipBack();
    }
  }
  // 下一首
  if(e.keyCode == 39) {
    ap.skipForward();
  }
});

如果一个页面有多个播放器实例对象ap,可以通过判断其播放状态精确控制哪个播放器上下首。

document.addEventListener('keydown', function(e) {
  // 3个Aplayer实例
  var apList = [ap1, ap2, ap3]; 
  // 上一首
  if(e.keyCode == 37) {
    for(var i in apList) {
      if(apList[i].paused === false) {
        apList[i].skipBack();
      }
    }
  }
  // 下一首
  if(e.keyCode == 39) {
    for(var i in apList) {
      if(apList[i].paused === false) {
        apList[i].skipForward();
      }
    }
  }
});

比较受局限的一点是只有在当前页面点击左右键才会生效,在页面之外是无法控制的,更多Aplayer API请参考官网API

好啦,以上就是使用Aplayer在博客中添加音乐播放器的教程啦,是不是既强大又好用,非常Nice~ 希望对大家有所帮助,如有问题可通过我的博客https://echeverra.cn或微信公众号echeverra联系我。

你学“废”了么?

参考文章:

(完)

(文章今日已有 1 人访问 ::>_<::)
文章首发于我的博客 https://echeverra.cn/aplayer,原创文章,转载请注明出处。
欢迎关注我的微信公众号 echeverra,一起学习进步!不定时会有资源和福利相送哦!

评论

  1. Windows Edge
    浙江省温州市 移动
    3 月前
    2024-8-02 10:25:11

    害,我不知道为啥粘贴上去显示错位,后来直接用了网易云的外链播放器,感觉更省心

    • 博主
      /title @a title ""
      Windows Chrome
      天津市 电信
      3 月前
      2024-8-02 10:29:42

      哈哈

发送评论 编辑评论


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