Aplayer meting.js的使用

本文最后更新于2022.06.01-05:27,某些文章具有时效性,若有错误或已失效,请在下方留言或联系涛哥

示例效果

新版方法

在需要应用的地方加入以下代码

方法1:我的方法

<link rel="stylesheet" href="/wp-admin/css/APlayer.min.css">
<script src="/wp-admin/js/Aplayer/APlayer.min.js"></script>
<div class="aplayer"
data-id="2624316345"
data-fixed="false"//关闭吸底模式
data-server="netease"
data-volume="0.4"
data-type="playlist">
</div>
<script src="/wp-admin/js/Aplayer/Meting.min.js"></script>

方法2:

<!-- 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>
<meting-js id="2624316345"
      server="netease" 
      volume="0.4"
      type="playlist"></meting-js>
<!-- require MetingJS --> 
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

选项

名称 默认值 描述
id 必须 歌曲 id/歌单 id/专辑 id/搜索关键词
server 必须 音乐平台:netease,tencent,kugou,xiami,baidu
type 必须 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 列表最大高度
storage-name metingjs 存储播放器设置的 localStorage key

旧版方法(不稳定)

在 head 标签引入 css 样式文件

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

在 body 标签内加入 div 标签并引入 js 文件

<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

加载播放器

const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,//开启吸底模式
autoplay: true,//自动播放
lrcType: 1,//歌词加载方式
audio: audioArr,//歌曲列表
});
//更多详细参数请前往https://aplayer.js.org/#/zh-Hans/查看

引入 autoPlay.js 自动加载网易云音乐(可选,需 jQuery 支持)

try {
$.ajax({url: "https://cdn.bootcss.com/bluebird/3.5.5/bluebird.min.js", dataType:"script", cache: true, success: function() {
$.ajax({url: "https://cdn.bootcss.com/fetch/2.0.4/fetch.min.js", dataType:"script", cache: true, success: function() {
function fetch163Playlist(playlist_id) {
return new Promise(function (ok, err) {
fetch("https://v1.hitokoto.cn/nm/playlist/" + playlist_id)
.then(function (response) {
return response.json();
})
.then(function (data) {
var arr = [];
data.playlist.tracks.map(function (value) {
arr.push(value.id);
});
return arr;
})
.then(function (ids) {
return fetch163Songs(ids);
})
.then(function (data) {
ok(data);
})
.catch(function (e) {
err(e);
});
})
}
function fetch163Songs(IDS) {
return new Promise(function (ok, err) {
var ids;
switch (typeof IDS) {
case 'number':
ids = [IDS];
break;
case 'object':
if (!Array.isArray(IDS)) {
err(new Error("Please enter array or number"));
}
ids = IDS;
break;
default:
err(new Error("Please enter array or number"));
break;
}
fetch("https://v1.hitokoto.cn/nm/summary/" + ids.join(",") + "?lyric=true&common=true")
.then(function (response) {
return response.json();
})
.then(function (data) {
var songs = [];
data.songs.map(function (song) {
songs.push({
name: song.name,
url: song.url,
artist: song.artists.join("/"),
album: song.album.name,
pic: song.album.picture,
lrc: song.lyric
});
});
return songs;
})
.then(function (result) {
ok(result);
})
.catch(function (e) {
err(e);
});
});
}
/****加载多个网易云音乐单曲****/
fetch163Songs(songArr)//此处"songArr"为网易云音乐id数组
.then(function (data) {
let audioArr=[];
for(let i=0;i<data.length;i++){
audioArr.push({'name':data[i].name,'artist':data[i].artist,'url':data[i].url,'cover':data[i].pic,'lrc':data[i].lrc.base});
}
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
lrcType: 1,
audio: audioArr,
});
})
.catch(function (err) {
console.error('网易云音乐获取失败!'+err);
})
/****加载网易云音乐歌单****/
fetch163Playlist(listId)//此处"listId"为网易云音乐歌单id
.then(function (data) {
let audioArr=[];
for(let i=0;i<data.length;i++){
audioArr.push({'name':data[i].name,'artist':data[i].artist,'url':data[i].url,'cover':data[i].pic,'lrc':data[i].lrc.base});
}
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
lrcType: 1,
audio: audioArr,
});
})
.catch(function (err) {
console.error('网易云音乐获取失败!'+err);
})
}});
}});
} catch(err) { console.log("[Error]"+err) }

说明

    Aplayer插件下载

    来源:百度网盘 | 提取码:gthi

    版权声明:
    作者:涛哥
    链接:https://ltbk.net/write/article/439.html
    来源:涛哥博客
    文章版权归作者所有,未经允许请勿转载。

    THE END
    分享
    二维码
    打赏
    海报
    Aplayer meting.js的使用
    本文最后更新于2022.06.01-05:27,某些文章具有时效性,若有错误或已失效,请在下方留言或联系涛哥。示例效果 新版方法 在需要应用的地方加入以下代码 方法……
    <<上一篇
    下一篇>>
    文章目录
    关闭
    目 录