wx-audio

微信公众号音乐播放器

基于原生js写的一款仿微信公众号的音乐组件

演示地址

http://www.daiwei.org/components/wx-audio/

手机预览

安装

npm 安装

  npm install @dw/wx-audio

引入

  import WxAudio from '@dw/wx-audio/lib/wx-audio.css'
  import WxAudio from '@dw/wx-audio'

普通资源引入,先将es5文件下的目录放到自己的项目中，然后根据路径引入

<link href="./wx-audio.css" rel="stylesheet">
<script type="text/javascript" src="wx-audio.js"></script>

实例化 音乐组件

var wxAudio = new WxAudio({
  ele: '#textaudio1',
  title: '河山大好',
  disc: '许嵩',
  src: 'http://oiq8j9er1.bkt.clouddn.com/%E8%AE%B8%E5%B5%A9%20-%20%E6%B2%B3%E5%B1%B1%E5%A4%A7%E5%A5%BD1.mp3',
  width: '320px',
  autoplay: true,
  loop: true,
  ended: function () {
    alert('播放结束')
  }
});

属性

• ele dom对象
• title 音乐标题
• disc 描述，可以当做显示歌手名称
• src 地址
• width 显示的宽度
• loop 是否循环（当循环状态下时候，ended事件不会执行）
• ended 方法，是一个回调，可在音乐播放结束之后执行其他的代码
• autoplay 属性， 是否自动播放，这个只能在微信浏览器以及只设置静态src才能自动播放

方法

 // 实例化的wxAudio可以这样操作
wxAudio.audioPlay()   // 播放

wxAudio.audioPause()   // 暂停

wxAudio.audioPlayPause()  // 播放暂停

wxAudio.showLoading(bool)  //显示加载状态  参数bool
 
wxAudio.audioCut(src,title,disc)  实现音频切换的效果

新增 音乐组件切歌方法

通过实例化的wxAudio的audioCut(src,title,disc) 实现音频切换的效果  示例代码如下

  var src = 'http://oiq8j9er1.bkt.clouddn.com/%E6%9E%97%E4%BF%8A%E6%9D%B0%20-%20%E5%A5%B9%E8%AF%B41.mp3'
  var title = '她说'
  var disc = '林俊杰'
  wxAudio.audioCut(src, title, disc)