呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

使用 APlayer && MetingJS 在博文中优雅的嵌入音频

前言

在上一篇文章 利用 DPlayer+七牛云 在博文中优雅的嵌入视频(基于Django博客) 中,我们使用 DIYGod 大佬的 DPlayer 组件成功将视频嵌入到我们的博文中。

本篇文章使用大佬的另一个开源项目 APlayer 以及 metowolf 的 MetingJS 插件,在博文中嵌入音乐播放组件。

废话不多说,效果如下(我的网易云歌单):

安装

APlayer 其实有 使用文档,但是需要手动配置音乐url和歌词封面等音乐相关信息,比较麻烦。

于是 metowolf 大佬就写了个和 APlayer 配合的 MetingJS 插件,它可以自动从 API 请求歌曲信息,再在用户端进行生成播放器,相当于简化了 APlayer 的部署过程。

所以我们直接用 MetingJS 引入 APlayer 就可以了。

使用方法(以下内容引用自:让 Ghost 吃上 APlayer - metowolf ):

引入依赖

首先进入后台,进入 Code Injection 菜单,在 Blog Header 加入代码

<style>
    li {margin: 0em 0;}
    button {min-height: 0px;}
    .aplayer {margin: 0 0 1.75em 0 !important;}
</style>

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

*其中 css 部分是为了修复主题和播放器不兼容的部分

然后在 Blog Footer 中添加

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

至此,播放器已经引入成功了

使用

在文章中想要的位置添加如下的代码即可

<div class="aplayer" data-id="60198" data-server="netease" data-type="playlist" data-mode="random"></div>

更多参数详见 https://github.com/metowolf/MetingJS#option

尾声

通过 MetingJS 使用 APlayer 的方法是不是很简单呢?

快在博客中加入你自己的歌单吧!

原创声明

转载请注明:呓语 » 利用 APlayer+MetingJS 在博文中优雅的嵌入音频