全站通知：

模板:音乐播放器

来自双生视界WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索


描述

一个功能比较完整的小型音乐播放器，自带奢华黑胶大碟与基本的控制组件

实现了：

-> 单曲单次播放

-> 内置循环歌单

-> 上一曲/下一曲

-> 暂停/播放

-> 拖动调整进度

-> 音频载入时屏蔽操作

-> 移动端适配

语法

调用须知

json文本建议在编译器写好后再粘过来（写完才发现wiki的编辑器会产生很多蛋疼的隐藏字符)

编写时用英文字符，注意逗号

编辑完出现未初始化的播放器一般是json格式不对，在控制台能看到报错

单曲播放

{{音乐播放器|
json={
        "1": {
        "name": "名称",
        "img": "光盘的图像（长宽相等，像素无要求）",
        "url": "歌曲外链（那种访问后黑屏，一个白色播放器的链接）"
        }
        }
        }}

歌单循环（内置n首歌）

{{音乐播放器|
json={
        "1": {
        "name": "名称1",
        "img": "光盘的图像1（长宽相等，像素无要求）",
        "url": "歌曲外链1（那种访问后黑屏，一个白色播放器的链接）"
        },
        "2": {
        "name": "名称2",
        "img": "光盘的图像2（长宽相等，像素无要求）",
        "url": "歌曲外链2（那种访问后黑屏，一个白色播放器的链接）"
        },
        。
        。
        。
        "n": {
        "name": "名称n",
        "img": "光盘的图像n（长宽相等，像素无要求）",
        "url": "歌曲外链n（那种访问后黑屏，一个白色播放器的链接）"
        }
        }
        }}

高级功能

1.用JS载入歌单

//当变量J包含歌单信息 （J为JSON对象）
 let event = document.createEvent('HTMLEvents');
 event.initEvent("onLoadJsonToMusicPlayer", true, true)；
 event.jsonDat = J;
 document.dispatchEvent(event);

2.用JS指定播放第i首歌

//当变量i指定第几首歌（i为int类型）
 let event = document.createEvent('HTMLEvents');
 event.initEvent("onLoadSpecificMusic", true, true)；
 event.idx = i;
 document.dispatchEvent(event);

示例

效果见右上角（电脑端）

下拉一定距离后显示在上方（移动端）

  


 {{音乐播放器|
json={
        "1":{
		"name": "好运来",
        "img": "https://patchwiki.biligame.com/images/sssj/0/0b/52uqg6ythchdmj14rwzjq0rnmmnqbbh.png",
        "url": "https://www.joy127.com/url/72468.mp3"
        },
        "2": {
		"name": "首页bgm",
		"img": "https://patchwiki.biligame.com/images/sssj/5/5a/kf10ixgv6lsqtyawkviauc7mpszmv99.png",
        "url": "https://www.joy127.com/url/79023.mp3"
        },
        "3": {
		"name": "还是好运来",
		"img": "https://patchwiki.biligame.com/images/sssj/a/a3/ii06erk904vfzyqzb38ud9oj60vr1nx.png",
        "url": "https://www.joy127.com/url/72468.mp3"
        }
        }
        }}
取自“https://wiki.biligame.com/sssj/index.php?title=模板:音乐播放器&oldid=21009”