OttoLi 的胡言乱语

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

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

2020年3月20日 4956点热度 5人点赞 8条评论

介绍

一句话说明白:

  • 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

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

      2020年10月23日
      回复
      • jaocky

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

        2020年10月23日
        回复
        • OttoLi

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

          2020年10月23日
          回复
        • lqy

          @jaocky 请问一下怎么在fixed模式下显示那个歌词按钮呢

          2022年3月5日
          回复
      • Garner

        @OttoLi 你好,能具体讲讲怎么设置lrc-type去掉歌词吗,看着实在难受 :cry:

        2021年7月22日
        回复
  • lizhuang

    我网站设置的meting为什么歌词有两个可以帮我看看吗在www.lizhuang.ltd

    2021年4月26日
    回复
  • showcoal

    问一下博主,你使用这个播放器有遇到跨域问题吗?

    2022年5月29日
    回复
  • 取消回复

    OttoLi

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

    最新 热点 随机
    最新 热点 随机
    Linux 如何使用密钥对连接 SSH 并关闭密码连接 2021 甲骨文云 Oracle Always Free 永久免费 VPS 服务器 | 介绍/注册/申请/部署/连接/注意事项 Linux 中文语言环境设置 + 时区更改 已测试 CentOS Ubuntu ttf ttc otf otc 这些字体究竟有什么区别? 为 WordPress 添加 reCAPTCHA 人机验证 阿里云同账号迁移服务器教程
    [下载]那些超级有用的美术技法教程书Netch-可替代 SSTap 的开源游戏加速器[资源]攻壳机动队系列蓝光收藏指南2021 甲骨文云 Oracle Always Free 永久免费 VPS 服务器 | 介绍/注册/申请/部署/连接/注意事项APlayer & MetingJS 音乐播放器使用指南为 WordPress 添加 reCAPTCHA 人机验证
    [资源]紫罗兰永恒花园:外传 Netch-可替代 SSTap 的开源游戏加速器 为 WordPress 添加 reCAPTCHA 人机验证 如何用 ssr 加速游戏——SSTap ttf ttc otf otc 这些字体究竟有什么区别? KMS 服务器的搭建及使用
    标签聚合
    建站 动漫 教程 C语言 Linux 游戏 绘画 Windows 资源 APlayer 软件 Wordpress Office 日期与时间 字体 vscode kms MetingJS CentOS ssr
    关于本站

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

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

    COPYRIGHT © 2022 OttoLi. ALL RIGHTS RESERVED.SITEMAP

    THEME KRATOS 豫ICP备20004659号 萌ICP备20210150号

    腾讯云  LiteServer  Google Analytics  CloudFlare