OttoLi 的胡言乱语

  • Otto画廊
  • Otto文集
  • 账户
    • 登录
    • 注册
    • 个人中心
head

APlayer & MetingJS 音乐播放器使用指南

2020年3月20日 1504点热度 1人点赞 4条评论

介绍

一句话说明白:

  • APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器
  • MetingJS 是为 APlayer 添加网易云、QQ音乐等支持的插件

他们的 GitHub 项目地址分别为:

  • APlayer:https://github.com/DIYgod/APlayer
  • MetingJS:https://github.com/metowolf/MetingJS

安装

安装很简单,一共需要调用三个文件: APlayer.min.js APlayer.min.css Meting.min.js

你可以使用 CDN 调用,只需要在 <head> 里面插入:

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

在 footer 里面插入:

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

当然,你可以将这些文件托管在自己的服务器,把上面的调用链接改成自己的就行了

使用

APlayer 原生用法

先看一个最简单的例子:

代码如下:

<div id="aplayer01"></div>
<script type="text/javascript">
    const ap = new APlayer({
        container: document.getElementById('aplayer01'),
        audio: [{
            name: '碧い瞳のエリス',
            artist: '安全地帯',
            url: 'https://doge.ottoli.cn/安全地帯 - 碧い瞳のエリス.mp3',
            cover: 'https://doge.ottoli.cn/aqdd.jpg'
        }]
    });
</script>

在js 代码中:

  • 参数 container 值为 document.getElementById('aplayer01') 意思是定义当前播放器容器 id 为 aplayer01
  • 参数 audio 中有 4 个子参数,定义关于音频的相关参数:
    • 参数 name 定义音频名称
    • 参数 artist 定义艺术家名
    • 参数 url 指向音频文件的地址
    • 参数 url 指向音频封面的地址

然后,在需要使用播放器的地方,将容器 <div> 的 id 设置为参数 container 中设定的值即可

至于如何添加多个音频组成播放别表、显示歌词等更多功能,请参考 APlayer 官方文档

MetingJS 的用法

前面已经看到,APlayer 原生用法设置参数十分繁琐,而且只能调用音频文件直链,增加服务器开销。而使用 MetingJS 就很好地解决了这个问题

先看一个最简单的例子:

对应的代码为:

<meting-js
	server="tencent"
	type="song"
	id="000akynZ2Rbro5">
</meting-js>

一个 MetingJS 播放器至少需要三个参数:

  • server 指定调用的 API ,可选 netease, tencent, kugou, xiami, baidu ,分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
  • type 指定调用类型,可选 song, playlist, album, search, artist ,分别对应单曲、歌单、专辑、搜索结果、艺术家
  • id 指定调用的 id ,一般可以在地址栏中找到

当 type 选择的是个播放列表时,生成的播放器是这样的:

播放列表默认是打开的,你可以使用参数 listFolded="true" 使其默认折叠

当你设定 fixed="true" ,会生成一个吸附在页面左下角的播放器,就像我的博客左下角那个

当你设定 mini="true" ,会生成一个 mini 播放器:

值得注意的是:除了 mini 模式,MetingJS 生成的播放器默认是带有歌词的(而且关不掉)

全部参数说明请查阅 MetingJS 官方文档 (其实除了三个必要参数其余都和 APlayer 原生参数一样)

好啦又水完了一篇

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
标签: APlayer MetingJS Wordpress
最后更新:2021年2月21日

OttoLi

涧户寂无人,纷纷开且落
——辛夷坞

打赏 点赞
< 上一篇
下一篇 >

文章评论

  • jaocky

    能不能更改为默认不显示歌词呢?在中间感觉很乱

    2020年10月23日
    登录以回复
    • OttoLi
      OttoLi

      @jaocky MetingJS 生成的播放器默认是带有歌词的,我没有找到默认不显示歌词的方法
      如果想彻底去掉歌词,可以加上参数 lrc-type="0"
      这样就完全没有歌词了

      2020年10月23日
      登录以回复
      • jaocky

        @OttoLi 已经找到方法了,就是默认歌词是灰的,点击才会显示,谢谢博主~

        2020年10月23日
        登录以回复
        • OttoLi
          OttoLi

          @jaocky 可以分享一下方法吗?

          2020年10月23日
          登录以回复
  • 您需要 登录 之后才可以评论

    OttoLi

    涧户寂无人,纷纷开且落
    ——辛夷坞

    最新 热点 随机
    最新 热点 随机
    ttf ttc otf otc 这些字体究竟有什么区别? 为 WordPress 添加 reCAPTCHA 人机验证 阿里云同账号迁移服务器教程 ass字幕加载字体的那些事 索尼a6300说明书帮助指南PDF版下载 [资源]攻壳机动队系列蓝光收藏指南
    [下载]那些超级有用的美术技法教程书Netch-可替代 SSTap 的开源游戏加速器[资源]攻壳机动队系列蓝光收藏指南APlayer & MetingJS 音乐播放器使用指南ass字幕加载字体的那些事WordPress 建站日志
    如何自定义Win32程序的应用磁贴 [资源]攻壳机动队系列蓝光收藏指南 阿里云同账号迁移服务器教程 ttf ttc otf otc 这些字体究竟有什么区别? 用 VS Code 配置 C/C++ 开发环境 为 WordPress 添加 reCAPTCHA 人机验证
    标签聚合
    动漫 kms Windows 建站 游戏 教程 APlayer Office 资源 MetingJS Wordpress C语言 vscode 字体 绘画 软件 ssr
    关于本站

    Otto 不知道该说些什么,于是写了这么一行字……

    目录 隐藏
    1. 介绍
    2. 安装
    3. 使用
    3.1. APlayer 原生用法
    3.2. MetingJS 的用法

    COPYRIGHT © 2020 OttoLi. ALL RIGHTS RESERVED.SITEMAP

    THEME KRATOS MADE BY VTROIS 豫ICP备20004659号

    Aliyun  Google Analytics  Maoyun