本仓库是我对metingjs的修改版,用于在volantis主题中实现加载本地音乐功能.除此之外其他功能不变,可以方便地由metingjs快速转到meting-plus
只需要在原meting-js标签中添加audio属性,即可加载本地音乐.如果没有该属性,则使用原meting-js方法
将歌曲以数组的方式储存,如下所示
const MyList = [{
"name": "Flower Dance",
"artist": "Oturans - DJ Okawari",
"title": "Flower Dance",
"url": "music/Flower Dance.mp3",
"lrc": "music/all.lrc",
"cover": "music/Flower Dance.jpg"
}, {
"name": "夜的钢琴曲",
"artist": "K. Williams",
"title": "夜的钢琴曲",
"url": "music/夜的钢琴曲.mp3",
"lrc": "music/all.lrc",
"cover": "music/夜的钢琴曲.jpg"
}]创建如下标签
<meting-js audio="MyList">
</meting-js>则meting-plus会通过eval的方式执行MyList,返回值作为歌曲列表传入Aplayer
将歌曲列表转化为字符串,并使用URI编码
const MyListStr = encodeURI(JSON.stringify(MyList))此时MyListStr的值为
%5B%7B%22name%22:%22Flower%20Dance%22,%22artist%22:%22Oturans%20-%20DJ%20Okawari%22,%22title%22:%22Flower%20Dance%22,%22url%22:%22music/Flower%20Dance.mp3%22,%22lrc%22:%22music/all.lrc%22,%22cover%22:%22music/Flower%20Dance.jpg%22%7D,%7B%22name%22:%22%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2%22,%22artist%22:%22K.%20Williams%22,%22title%22:%22%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2%22,%22url%22:%22music/%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2.mp3%22,%22lrc%22:%22music/all.lrc%22,%22cover%22:%22music/%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2.jpg%22%7D%5D
将该值作为meting-js标签的audio属性写入
<meting-js audio="%5B%7B%22name%22:%22Flower%20Dance%22,%22artist%22:%22Oturans%20-%20DJ%20Okawari%22,%22title%22:%22Flower%20Dance%22,%22url%22:%22music/Flower%20Dance.mp3%22,%22lrc%22:%22music/all.lrc%22,%22cover%22:%22music/Flower%20Dance.jpg%22%7D,%7B%22name%22:%22%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2%22,%22artist%22:%22K.%20Williams%22,%22title%22:%22%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2%22,%22url%22:%22music/%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2.mp3%22,%22lrc%22:%22music/all.lrc%22,%22cover%22:%22music/%E5%A4%9C%E7%9A%84%E9%92%A2%E7%90%B4%E6%9B%B2.jpg%22%7D%5D">
</meting-js><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Meting-plus</title>
<script defer src="APlayer.min.js"></script>
<link type="text/css" rel="stylesheet" href="APlayer.min.css" />
<script defer src="source/Meting-plus.js"></script>
</head>
<body>
<meting-js audio="MyList">
</meting-js>
</body>
</html>
<script>
const MyList = [{
"name": "Flower Dance",
"artist": "Oturans - DJ Okawari",
"title": "Flower Dance",
"url": "music/Flower Dance.mp3",
"lrc": "music/all.lrc",
"cover": "music/Flower Dance.jpg"
}, {
"name": "夜的钢琴曲",
"artist": "K. Williams",
"title": "夜的钢琴曲",
"url": "music/夜的钢琴曲.mp3",
"lrc": "music/all.lrc",
"cover": "music/夜的钢琴曲.jpg"
}]
</script>