音乐控件
实际效果
使用方法:
1.引入文件
<script src="http://www.1473.cn/uform.js" type="text/javascript"></script>
2.js代码使用:
调用方法: U.MT.UI.music(musicList,index,autoplay);
参数(musicList): 音乐数组json
格式:
[
{title:音乐名,author:歌手名,src:音乐播放路径,cover:音乐封面路径,lrc:歌词},
{title:音乐名,author:歌手名,src:音乐播放路径,cover:音乐封面路径,lrc:歌词},
{title:音乐名,author:歌手名,src:音乐播放路径,cover:音乐封面路径,lrc:歌词},
];
例: [
{
title: '童话镇',
author: '陈一发儿',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/%E9%99%88%E4%B8%80%E5%8F%91%E5%84%BF%20-%20%E7%AB%A5%E8%AF%9D%E9%95%87.mp3',
cover: 'https://pic.xiami.net/images/album/img57/129/580987cd1634f_6451457_1477019597.png',
lrc: '[00:20.300]编曲:暗杠 [00:21.300]制作人：暗杠,此处太长省略
},
{
title: '成都',
author: '赵雷',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/%E8%B5%B5%E9%9B%B7%20-%20%E6%88%90%E9%83%BD.mp3',
cover: 'https://pic.xiami.net/images/album/img87/181/585a3226db20e_9076087_1482306086.jpg'
}
]
参数(index): 需要播放的第几首歌(数组中的索引) 例 我要播放:童话镇 则填写0,成都 则是1
参数(autoplay):可填可不填 是否自动播放 是则为true 否则为false
例: window.onload = function () {
U.UF.DL.asynLoadCss({ "href": "http://m.1473.cn/css/Controls/Basic/Music.css", type: "text/css", rel: "stylesheet" });
U.UF.DL.asynLoadJs({ type: "text/javascript", src: "http://m.1473.cn/Js/Controls/Basic/Music.js" });
$("#Button1")[0].onclick = function () {
U.MT.UI.music(List, 1);
}
$("#Button2")[0].onclick = function () {
U.MT.UI.music(List, 2);
}
$("#Button3")[0].onclick = function () {
U.MT.UI.music(List, 3);
}
}
3.代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content=" ">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<button id="openBtn">打开音乐播放器</button>
<script type="text/javascript">
window.onload = function () {
var List = [
{
title: 'Letter Song',
author: 'ヲタみん',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/%E3%83%B2%E3%82%BF%E3%81%BF%E3%82%93%20-%20Letter%20Song.mp3',
cover: 'http://pic.xiami.net/images/album/img75/87975/6615037721361503772.jpg',
lrc: 'http://7xq3d5.com1.z0.glb.clouddn.com/letter-song.lrc'
},
{
title: '光るなら',
author: 'Goose house',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/Goose%20house%20-%20%E5%85%89%E3%82%8B%E3%81%AA%E3%82%89.mp3',
cover: 'https://p3.music.126.net/R3ndkz84v-nDZKVCBjXArw==/7834020348181215.jpg?param=130y130'
},
{
title: '君だったら',
author: 'HAPPY BIRTHDAY',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/HAPPY%20BIRTHDAY%20-%20%E5%90%9B%E3%81%9F%E3%82%99%E3%81%A3%E3%81%9F%E3%82%89.mp3',
cover: 'https://pic.xiami.net/images/album/img99/21699/216991364021699.jpg'
},
{
title: 'あの頃~ジンジンバオヂュオニー~',
author: 'whiteeeen',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/whiteeeen%20-%20%E3%81%82%E3%81%AE%E9%A0%83~%E3%82%B7%E3%82%99%E3%83%B3%E3%82%B7%E3%82%99%E3%83%B3%E3%83%8F%E3%82%99%E3%82%AA%E3%83%81%E3%82%99%E3%83%A5%E3%82%AA%E3%83%8B%E3%83%BC~.mp3',
cover: 'https://pic.xiami.net/images/album/img8/1726043308/21002132941444187076.jpeg'
},
{
title: '童话镇',
author: '陈一发儿',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/%E9%99%88%E4%B8%80%E5%8F%91%E5%84%BF%20-%20%E7%AB%A5%E8%AF%9D%E9%95%87.mp3',
cover: 'https://pic.xiami.net/images/album/img57/129/580987cd1634f_6451457_1477019597.png',
lrc: '[00:20.300]编曲:暗杠 [00:21.300]制作人：暗杠 [00:21.500]器乐演奏：暗杠 [00:22.300]和声编写：暗杠 [00:23.300]听说白雪公主在逃跑 [00:26.810]小红帽在担心大灰狼 [00:30.110]听说疯帽喜欢爱丽丝 [00:33.570]丑小鸭会变成白天鹅 [00:37.050]听说彼得潘总长不大 [00:40.360]杰克他有竖琴和魔法 [00:43.780]听说森林里有糖果屋 [00:46.960]灰姑娘丢了心爱的玻璃鞋 [00:51.030]只有睿智的河水知道 [00:53.900]白雪是因为贪玩跑出了城堡 [00:57.890]小红帽有件抑制自己 [01:00.890]变成狼的大红袍 [01:04.290]总有一条蜿蜒在童话镇里七彩的河 [01:11.350]沾染魔法的乖张气息 [01:14.820]却又在爱里曲折 [01:18.190]川流不息扬起水花 [01:21.260]又卷入一帘时光入水 [01:24.920]让所有很久很久以前 [01:28.410]都走到幸福结局的时刻 [01:47.410]听说睡美人被埋藏 [01:50.740]小人鱼在眺望金殿堂 [01:54.210]听说阿波罗变成金乌 [01:57.520]草原有奔跑的剑齿虎 [02:01.100]听说匹诺曹总说着谎 [02:04.400]侏儒怪拥有宝石满箱 [02:07.920]听说悬崖有颗长生树 [02:11.140]红鞋子不知疲倦地在跳舞 [02:14.740]只有睿智的河水知道 [02:18.100]睡美人逃避了生活的煎熬 [02:21.700]小人鱼把阳光抹成眼影 [02:24.910]投进泡沫的怀抱 [02:28.040]总有一条蜿蜒在童话镇里七彩的河 [02:35.450]沾染魔法的乖张气息 [02:38.780]却又在爱里曲折 [02:42.260]川流不息扬起水花 [02:45.310]又卷入一帘时光入水 [02:48.950]让所有很久很久以前 [02:52.260]都走到幸福结局的时刻 [02:55.980]总有一条蜿蜒在童话镇里梦幻的河 [03:02.780]分隔了理想分隔现实 [03:06.120]又在前方的山口汇合 [03:09.610]川流不息扬起水花 [03:12.640]又卷入一帘时光入水 [03:16.330]让所有很久很久以前 [03:19.780]都走到幸福结局的时刻 又陌生 [03:25.370]啊~~啊~~啊~~啊~~'
},
{
title: '成都',
author: '赵雷',
src: 'http://7xq3d5.com1.z0.glb.clouddn.com/%E8%B5%B5%E9%9B%B7%20-%20%E6%88%90%E9%83%BD.mp3',
cover: 'https://pic.xiami.net/images/album/img87/181/585a3226db20e_9076087_1482306086.jpg'
}
];
U.UF.DL.asynLoadCss({ "href": "http://m.1473.cn/css/Controls/Basic/Music.css", type: "text/css", rel: "stylesheet" });
U.UF.DL.asynLoadJs({ type: "text/javascript", src: "http://m.1473.cn/Js/Controls/Basic/Music.js" });
$("#Button1")[0].onclick = function () {
U.MT.UI.music(List, 1);
}
$("#Button2")[0].onclick = function () {
U.MT.UI.music(List, 2);
}
$("#Button3")[0].onclick = function () {
U.MT.UI.music(List, 3);
}
}
</script>
</body>
</html>