web简易MP3播放插件 Aplayer篇章一

植 树 节
简易MP3播放插件（Aplayer）
[3/12]


效果如图所示：

blob.png

写入初始代码，定义一个id唯一的div player1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>Aplayer mp3播放器</title>
  </head>
  <body>
    <div id="player1" class="aplayer"></div>
  </body>
</html>

script载入Aplayer插件

<div id="player1" class="aplayer"></div>
<script src="http://www.wuhairui.cn/aplayer/dist/APlayer.min.js"></script>

在之后进行初始化插件，并展示出来即可

<script>
  var ap1=new APlayer({
    element:document.getElementById("player1"),//植入的divid
    narrow: false,//宽窄
    autoplay: false,//是否自动播放
    showlrc: false,//是否展示歌词
    mutex: true,//是否互斥
    theme: '#f00',//进度条颜色
    mode: 'circulation',//渲染方式
    music: {//mp3信息 （标题 演唱 音频地址 音频封面）
      title: '限界突破&times;サバイバー',
      author: '冰川清志',
      url: '//note.youdao.com/yws/api/personal/file/4E5475A244DB4A84A8DD3C7A7AD8EC63?method=download&inline=true&shareKey=174234ed101e2697114bde87be19ed14',
      pic: '//img001.photo.21cn.com/photos/album/20080306/o/4F07E017A6D82D0BA864FC2054BFD8C5.jpg'
    }
  });
</script>

以及这里还有一些播放器的回调接口，让你更好地控制播放器。

ap1.on('play', function () {//播放开始时执行
 console.log('play');
});
ap1.on('pause', function () {//播放暂停时执行
 console.log('pause');
});
ap1.on('canplay', function () {//加载完毕时执行
 console.log('canplay');
});
ap1.on('playing', function () {//播放中时多次执行
 console.log('playing');
});
ap1.on('ended', function () {//播放完时执行
 console.log('ended');
});
ap1.on('error', function () {//播放错误时执行
 console.log('error');
});


 

posted @ 2017-03-20 22:50  herry菌  阅读(751)  评论(0)  编辑  收藏  举报