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

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

47587 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

jwplayer响应式多终端适配视频播放器

jwplaye，自定义视频图片封面，全浏览器兼容、响应式多终端适配视频播放器

音频和视频

176546 664

jQuery html5自定义视频控件

html5自定义视频控件，加入评论，载入弹幕，鼠标悬浮在进度条显示某时刻画面，视频卡端显示加载动画，清晰度切换等功能；并添加了弹幕隐藏显示设置，播放速度设置，镜像翻转设置。

音频和视频

74192 574

3D音频分析仪

3D音频分析仪,效果那是相当的震撼。

音频和视频

40584 400

jQuery视频播放插件jsModern（修改版）

一款简单的网页视频播放器插件jsModern,视频插件加了一个播放的按钮，视频播放时候就隐藏。暂停就显示，

音频和视频

51754 420

讨论这个项目（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;
});