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

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

47294 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

h5视频播放器

支持拖拽与点击跳转可以切换全屏并且支持音量调节已经绑定键盘事件

音频和视频

126771 445

jQuery网页跨平台媒体播放器

用于Web的可扩展的媒体播放器，跨平台，支持HLS，MP3，MP4等格式。

音频和视频

106665 380

jQuery小果音乐播放器（原创）

小果音乐播放器，界面简约清新，功能实用

音频和视频

17032 181

js音频可视化插件Wavesurfer.js

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

音频和视频

62318 347

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