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

所属分类：媒体-音频和视频

47384 359 查看评论 (55)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：基于原生的音频播放器效果，小巧易用

更新时间：2018/12/10 下午3:08:16

更新说明：
1. 更新demo的音频地址
2. 组件的图片地址使用本地base64的图片格式

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

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

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

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写的一款仿微信公众号的音乐组件

实例化音乐组件

var wxAudio = new Wxaudio({
     ele: '#textaudio1',
     title: '河山大好',
     disc: '许嵩',
     src: 'http://.....mp3',
     width: '320px'
});

方法

// 实例化的wxAudio可以这样操作
wxAudio.audioPlay()   // 播放 
wxAudio.audioPause()   // 暂停 
wxAudio.audioPlayPause()  // 播放暂停 
wxAudio.showLoading(bool)  //显示加载状态  参数bool  
 wxAudio的audioCut(src,title,disc)  实现音频切换的效果

新增音乐组件切歌方法

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

var src = '.....mp3'
var title = '她说'
var disc = '林俊杰'
wxAudio.audioCut(src, title, disc)

jQuery鱼骨图

jQuery移动端图片查看插件photoswipe.js

jQuery视频弹窗插件

样式已经写好，使用方法也简单。

音频和视频

65615 468

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化，使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波

音频和视频

62423 347

jquery音乐播放器

基于Jplayer制作一款音乐播放器,界面简洁漂亮。

音频和视频

64104 476

jQuery自定audio音频

jQuery自定义audio音频样式，包括功能。

音频和视频

28083 321

讨论这个项目（55）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

泛白的夜 0

2021/9/16 23:52:18

未曾遗忘的青春0

2021/9/17 0:14:11

代码在这。自取 https://github.com/IFmiss/wx-audio

泛白的夜0

2021/9/20 11:30:46

We Don＇t Talk Anymore 1

2019/5/21 18:22:22

自己写了一个快进js

//  bg-control-left 快退元素类名
$("body").delegate('.bg-control-left', 'click', function() {
    var totalTime = $(".wx-audio-content")[1].duration;
    var curTime = $(".wx-audio-content")[1].currentTime;
    var unit = (100 / totalTime).toFixed(2);
    curTime -= 15; //快退时间
    if (curTime < 0) curTime = 0;
    var backX = curTime * unit;
    $(".wx-voice-p").css("width", backX + "%");
    $(".wx-audio-origin").css("left", backX + "%");
    $(".wx-audio-content")[1].currentTime = curTime;
});
//  bg-control-right  快进元素类名
$("body").delegate('.bg-control-right', 'click', function() {
    var totalTime = $(".wx-audio-content")[1].duration;
    var curTime = $(".wx-audio-content")[1].currentTime;
    var unit = (100 / totalTime).toFixed(2);
    curTime += 15; //快进时间
    if (curTime > totalTime) curTime = totalTime;
    var backX = curTime * unit;
    $(".wx-voice-p").css("width", backX + "%");
    $(".wx-audio-origin").css("left", backX + "%");
    $(".wx-audio-content")[1].currentTime = curTime;
});