MetingJS 是如何配合 Aplayer 加载歌单的?
Meting.js 介绍
Meting.js 依赖 APlayer.js,扩展了 APlayer.js 的功能,能够使 APlayer.js 加载网易云音乐、QQ 音乐、虾米音乐中的歌单。
安装
<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
使用
加载歌单
<meting-js
server="netease"
type="playlist"
id="60198">
</meting-js>
通过 auto 属性加载单曲:
<meting-js
auto="https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html">
</meting-js>
通过 url 加载单曲:
<meting-js
name="rainymood"
artist="rainymood"
url="https://rainymood.com/audio1110/0.m4a"
cover="https://rainymood.com/i/badge.jpg">
</meting-js>
加载托管在其他服务器上的单曲:
<meting-js
name="rainymood"
artist="rainymood"
url="https://rainymood.com/audio1110/0.m4a"
cover="https://rainymood.com/i/badge.jpg"
fixed="true">
<pre hidden>
[00:00.00]This
[00:04.01]is
[00:08.02]lyric
</pre>
</meting-js>
源码解析
class MetingJSElement extends HTMLElement {
/**
* 当自定义元素第一次被连接到文档 DOM 时被调用
* connectedCallback
* https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks
*/
connectedCallback() {
if (window.APlayer && window.fetch) {
this._init()
this._parse()
}
}
/**
* 与 connectedCallback 反
*/
disconnectedCallback() {
if (!this.lock) {
this.aplayer.destroy()
}
}
/**
* 驼峰化
* @param { string } str
* @returns { string } str
*/
_camelize(str) {
return str
.replace(/^[_.\- ]+/, '')
.toLowerCase()
.replace(/[_.\- ]+(\w|$)/g, (m, p1) => p1.toUpperCase())
}
/**
* 初始化
*/
_init() {
let config = {}
// attributes -> NamedNodeMap
// https://developer.mozilla.org/zh-CN/docs/Web/API/NamedNodeMap
for (let i = 0; i < this.attributes.length; i += 1) {
config[this._camelize(this.attributes[i].name)] = this.attributes[i].value
}
let keys = [
'server',
'type',
'id',
'api',
'auth',
'auto',
'lock',
'name',
'title',
'artist',
'author',
'url',
'cover',
'pic',
'lyric',
'lrc',
]
this.meta = {}
// 构建 meta
// config 保留 keys 数组中没有的属性
// keys 中有 config 中也有的属性给 meta 赋值,没有的先设为 undefined
for (let key of keys) {
this.meta[key] = config[key]
delete config[key]
}
this.config = config
this.api =
this.meta.api ||
window.meting_api ||
'https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r'
if (this.meta.auto) this._parse_link()
}
/**
* 解析 auto 属性的值
* 将解析后的结果赋值给 meta 对象的 server、type、id
*/
_parse_link() {
let rules = [
['music.163.com.*song.*id=(\\d+)', 'netease', 'song'],
['music.163.com.*album.*id=(\\d+)', 'netease', 'album'],
['music.163.com.*artist.*id=(\\d+)', 'netease', 'artist'],
['music.163.com.*playlist.*id=(\\d+)', 'netease', 'playlist'],
['music.163.com.*discover/toplist.*id=(\\d+)', 'netease', 'playlist'],
['y.qq.com.*song/(\\w+).html', 'tencent', 'song'],
['y.qq.com.*album/(\\w+).html', 'tencent', 'album'],
['y.qq.com.*singer/(\\w+).html', 'tencent', 'artist'],
['y.qq.com.*playsquare/(\\w+).html', 'tencent', 'playlist'],
['y.qq.com.*playlist/(\\w+).html', 'tencent', 'playlist'],
['xiami.com.*song/(\\w+)', 'xiami', 'song'],
['xiami.com.*album/(\\w+)', 'xiami', 'album'],
['xiami.com.*artist/(\\w+)', 'xiami', 'artist'],
['xiami.com.*collect/(\\w+)', 'xiami', 'playlist'],
]
for (let rule of rules) {
// 返回匹配
// eg: "https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html"
// ["y.qq.com/n/yqq/song/001RGrEX3ija5X.html", "001RGrEX3ija5X"]
let patt = new RegExp(rule[0])
let res = patt.exec(this.meta.auto)
if (res !== null) {
this.meta.server = rule[1]
this.meta.type = rule[2]
this.meta.id = res[1]
return
}
}
}
/**
* 对不同 url 仅行处理
* 生成配置并加载 APlayer
*/
_parse() {
if (this.meta.url) {
// 直接构建 APlayer 配置并加载 APlayer
let result = {
name: this.meta.name || this.meta.title || 'Audio name',
artist: this.meta.artist || this.meta.author || 'Audio artist',
url: this.meta.url,
cover: this.meta.cover || this.meta.pic,
lrc: this.meta.lrc || this.meta.lyric || '',
type: this.meta.type || 'auto',
}
if (!result.lrc) {
this.meta.lrcType = 0
}
if (this.innerText) {
result.lrc = this.innerText
this.meta.lrcType = 2
}
this._loadPlayer([result])
return
}
// 1. 通过 meta 拼凑接口参数获得完整接口 (_init 中存放的默认 api)
// 2. 请求接口,得到播放列表数据
// 3. 加载 APlayer
let url = this.api
.replace(':server', this.meta.server)
.replace(':type', this.meta.type)
.replace(':id', this.meta.id)
.replace(':auth', this.meta.auth)
.replace(':r', Math.random())
fetch(url)
.then(res => res.json())
.then(result => this._loadPlayer(result))
}
_loadPlayer(data) {
let defaultOption = {
audio: data,
mutex: true,
lrcType: this.meta.lrcType || 3,
storageName: 'metingjs',
}
if (!data.length) return
let options = {
...defaultOption,
...this.config,
}
//TODO
for (let optkey in options) {
if (options[optkey] === 'true' || options[optkey] === 'false') {
options[optkey] = options[optkey] === 'true'
}
}
let div = document.createElement('div')
options.container = div
this.appendChild(div)
this.aplayer = new APlayer(options)
}
}
// 创建标签
// customElements -> https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
if (window.customElements && !window.customElements.get('meting-js')) {
window.MetingJSElement = MetingJSElement
window.customElements.define('meting-js', MetingJSElement)
}
总结
Meting.js 支持加载歌单的的核心在于路径解析以及通过请求内置接口返回歌单列表数据。关键一点, Meting.js 使用了 JavaScript customElements
API,可能为了使用者方便,但这导致没有显式向外暴露任何 APlayer 实例,对于稍复杂的场景可能无法处理,只能进行魔改。Meting.js 比较适合较简单的 SPA 应用。关于兼容性,IE11 不支持 customElements
API。
理想情况是:Meting.js 与 APlayer.js 解耦,Meting.js 以工具函数的形式存在,仅处理 url 并抛出歌单数据,供 APlayer.js 使用。
MetingJS 是如何配合 Aplayer 加载歌单的?的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- 【Spring源码分析】非懒加载的单例Bean初始化过程(上篇)
代码入口 上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了f ...
- 【Spring源码分析】非懒加载的单例Bean初始化过程(下篇)
doCreateBean方法 上文[Spring源码分析]非懒加载的单例Bean初始化过程(上篇),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下 ...
- 【Spring源码分析】非懒加载的单例Bean初始化前后的一些操作
前言 之前两篇文章[Spring源码分析]非懒加载的单例Bean初始化过程(上篇)和[Spring源码分析]非懒加载的单例Bean初始化过程(下篇)比较详细地分析了非懒加载的单例Bean的初始化过程, ...
- Spring源码分析:非懒加载的单例Bean初始化前后的一些操作
之前两篇文章Spring源码分析:非懒加载的单例Bean初始化过程(上)和Spring源码分析:非懒加载的单例Bean初始化过程(下)比较详细地分析了非懒加载的单例Bean的初始化过程,整个流程始于A ...
- Spring源码分析:非懒加载的单例Bean初始化过程(下)
上文Spring源码分析:非懒加载的单例Bean初始化过程(上),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下AbstractAutowireC ...
- Spring源码分析:非懒加载的单例Bean初始化过程(上)
上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了finish ...
- Spring源码剖析4:懒加载的单例Bean获取过程分析
本文转自五月的仓颉 https://www.cnblogs.com/xrq730 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https ...
- easyUi load方法重新加载表单的数据
1.表单回显数据的方法 <script> //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:' ...
随机推荐
- .Net Core·寄托于IIS的REST服务405的问题
阅文时长 | 0.48分钟 字数统计 | 828.8字符 主要内容 | 1.引言&背景 2.声明与参考资料 『.Net Core·寄托于IIS的REST服务405的问题』 编写人 | SCsc ...
- [bug] IDEA编译时出现 Information:java: javacTask: 源发行版 1.8 需要目标发行版 1.8
原因 jdk版本选低了 解决 将以下几处jdk版本修改为1.8 Project Structure(File->Project Structure...)>Sources>Langu ...
- 国内Ubuntu16.04下载地址<其他系统可返回最首项>
ubuntu16.04下载地址: 中科大源 http://mirrors.ustc.edu.cn/ubuntu-releases/16.04/ 阿里云开源镜像站 http:/ ...
- useradd linux系统创建用户和设置密码简单脚本-1
useradd linux系统创建用户和设置密码简单脚本-1 linux_wangqiang 2019-12-04 20:51:18 65 收藏展开#!/bin/bash#快速创建用户 使用$1第一个 ...
- jolokia配置Java监控
wget http://search.maven.org/remotecontent?filepath=org/jolokia/jolokia-jvm/1.3.6/jolokia-jvm-1.3.6- ...
- Docker镜像的仓库及底层依赖的核心技术(3)
一.docker镜像的仓库 仓库分为公共仓库和私有仓库 DockerHub的官方仓库:https://hub.docker.com DockerPool社区仓库:https://dl.dockerpo ...
- IT菜鸟之交换机基础配置
交换机属于二层设备(隶属于osi七层模型中的第二层:数据链路层,不识别不支持IP地址) > 用户模式 用于登录设备 # 特权模式 用于查询设备配置 (config)# 全局模式 用于配置设备 ...
- STM32 keil中编译遇到的问题
发现 移植的SPI程序 说里面的 SPI_InitTypeDef 所有有关 SPI库函数的都找不到 这是因为 用的是 原子的程序 在 config函数中 把这个注释了
- lighttpd 轻量级WEB服务器
Lighttpd 是一款开源 Web 服务器软件.Lighttpd 安全快速,符合行业标准,适配性强并且针对高配置环境进行了优化.相对于其它的 Web 服务器而言,Lighttpd 占用内存更少:因其 ...
- Spring Cloud 升级之路 - 2020.0.x - 7. 使用 Spring Cloud LoadBalancer (2)
本项目代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 我们使用 Spri ...