黄聪：原生js的音频播放器，兼容pc端和移动端（原创） | disc

disc

关注(28)粉丝(399)

黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

黄聪：原生js的音频播放器，兼容pc端和移动端（原创）-LMLPHP

更新时间：2018/9/3 下午1:32:54

更新说明：添加音乐的loop设置和ended事件监听

loop为ture的时候不执行ended事件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

const wx = new WxAudio({

ele: '.wx-audio',

title: '河山大好',

disc: '许嵩',

src: '。。。。',

width: '320px',

loop: true,

ended: function() {

var src = '。。。。'

var title = '她说'

var disc = '林俊杰'

wx.audioCut(src, title, disc)

}

})

发布时间：2018-4-4 1:01

wx-audio

微信公众号音乐播放器

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

实例化音乐组件

1

2

3

4

5

6

7

var wxAudio = new Wxaudio({

ele: '#textaudio1',

title: '河山大好',

disc: '许嵩',

src: 'http://.....mp3',

width: '320px'

});

方法

1

2

3

4

5

6

// 实例化的wxAudio可以这样操作

wxAudio.audioPlay() // 播放

wxAudio.audioPause() // 暂停

wxAudio.audioPlayPause() // 播放暂停

wxAudio.showLoading(bool) //显示加载状态参数bool

wxAudio的audioCut(src,title,disc) 实现音频切换的效果

新增音乐组件切歌方法

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

1

2

3

4

var src = '.....mp3'

var title = '她说'

var disc = '林俊杰'

wxAudio.audioCut(src, title, disc)

网址：http://www.jq22.com/jquery-info18575

下载：jq22wx-audio2691201804040100.zip

04-28 15:14