黄聪:原生js的音频播放器,兼容pc端和移动端(原创)

更新时间: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: '。。。。',
     '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',
      '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

原文地址:https://www.cnblogs.com/huangcong/p/9809714.html