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

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

46120 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+HTML5类似百度音乐网页播放器代码

一款jQuery+HTML5类似百度音乐网页播放器代码免费下载，在HTML5盛行的今天，jQuery+HTML5取代了大量的程序开发工作，一款类似百度音乐播放器代码，功能灰常强大！支持火狐、IE9以上等支持HTML5+CSS3浏览器。（兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器）

音频和视频

55393 462

canvas视频录制(原创)

mediarecoder录制媒体流 canvas绘制动画导出录像视频

音频和视频

15855 150

jquery音乐播放器

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

音频和视频

62989 476

jQuery视频轮播（原创）

让视频像图片一样轮播

音频和视频

40168 366

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