助力4.1公益项目之Aplayer音乐播放器

解压附件把packs覆盖 根目录

第一步打开播放页 play.html

在</head>标签上面引入js与css


<link rel="stylesheet" href="/packs/aplayer/dist/APlayer.min.css">
<script src="/packs/aplayer/dist/APlayer.min.js"></script>


下面的就是播放器的三种形式

第一种 带歌曲跑马灯的


<div id="player3" class="aplayer"><pre class="aplayer-lrc-content">[dance:lrc]</pre></div>
<script>
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: false,
showlrc: true,
music: {
title: '[dance:name]',
author: '[dance:user zd=nichen]',
url: '{cscmsphp}annexlink("[dance:zdy zd=dance_server,purl,fid][dance:purl]");{/cscmsphp}',
pic: '[dance:pic dir=dance]'
}
});
ap3.init();
</script>



第二种不带歌词


<div id="player1" class="aplayer"></div>
<script>
var ap1 = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: false,
showlrc: false,
music: {
title: '[dance:name]',
author: '[dance:user zd=nichen]',
url: '{cscmsphp}annexlink("[dance:zdy zd=dance_server,purl,fid][dance:purl]");{/cscmsphp}',
pic: '[dance:pic dir=dance]'
}
});
ap1.init();
</script>


第三种 正方形播放器


<div id="player2" class="aplayer"></div>
<script>
var ap2 = new APlayer({
element: document.getElementById('player2'),
narrow: true,
autoplay: false,
showlrc: false,
music: {
title: '[dance:name]',
author: '[dance:user zd=nichen]',
url: '{cscmsphp}annexlink("[dance:zdy zd=dance_server,purl,fid][dance:purl]");{/cscmsphp}',
pic: '[dance:pic dir=dance]'
}
});
ap2.init();
</script>



//js标签中的
autoplay: false, 当他为false标示不自动播放 如果为true标示自动播放



三个播放器样式演示地址
http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201512/jiaoben3875/