微信公众号音乐播放器
http://www.daiwei.org/components/wx-audio/
npm 安装
npm install wx-audio
import WxAudio from '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',
loop: true,
ended: function () {
alert('播放结束')
}
});
- ele dom对象
- title 音乐标题
- disc 描述,可以当做显示歌手名称
- src 地址
- width 显示的宽度
- loop 是否循环(当循环状态下时候,ended事件不会执行)
- ended 方法,是一个回调,可在音乐播放结束之后执行其他的代码
// 实例化的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)