jQuery仿微信公众号语音框插件weixinAudio.js

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

 10733  84  查看评论 (43)
jQuery仿微信公众号语音框插件weixinAudio.js ie兼容10

更新时间:2017/12/6 下午3:44:36

更新说明:修复了一开始没有显示时间问题,修复了自动播放的问题。


使用方法很简单

<p class="weixinAudio">
   <audio src="" id="media" width="1" height="1" preload></audio>
   <span id="audio_area" class="db audio_area">
   <span class="audio_wrp db">
   <span class="audio_play_area">
   <i class="icon_audio_default"></i>
   <i class="icon_audio_playing"></i>
            </span>
   <span id="audio_length" class="audio_length tips_global">3:07</span>
   <span class="db audio_info_area">
                <strong class="db audio_title">Title/标题</strong>
                <span class="audio_source tips_global">From/来源</span>
   </span>
   <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
   </span>
   </span>
</p>
<script type="text/javascript">
   $('.weixinAudio').weixinAudio({
   autoplay:true,
   src:'sound/sound.mp3',
   });
</script>
相关插件-音频和视频

video封装ui

videoui无任何依赖,代码注释很清楚。
  音频和视频
 25494  69

jQuery仿微信公众号语音框插件weixinAudio.js

jQuery仿微信公众号的语音播放功能weixinAudio.js
  音频和视频
 10734  84

封面播放器

之前蓝色音乐播放器插入音乐播放器很麻烦,我做了一个封面炫酷的链接音乐播放器
  音频和视频
 21394  78

jQuery html5自定义视频控件

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

讨论这个项目(43)回答他人问题或分享插件使用方法奖励jQ币

    0
    2018/6/15 11:14:20
    这个东西能支持ie9吗
    回复
    NewSunshine 0
    2018/6/14 16:12:45
    这个挺好的 正是我所需要的 回复
    亚楠 0
    2018/5/31 13:55:06
    ios手机上音频是从听筒模式里出来的,怎样更改音频输出线路 回复
    毕竟辉煌,终身不忘 0
    2018/5/25 14:24:18
    作者你好,请问一下音乐源是不是没办法改成本地的磁盘上面的音乐?src路径我修改成本地磁盘上的音乐文件,却播放不了。 回复
    ☆冰 锋★ 0
    2018/5/23 9:42:39
    亚楠 0
    2018/4/27 11:24:59
    我想播放amr格式的怎么做? 回复
    如果的事 0
    2018/4/23 17:22:47
    就是 更新信息显示的 “修复了一开始没有显示时间问题 ” 我这边 苹果手机现在还是不能显示出来 安卓手机能显示 回复
    如果的事 0
    2018/4/23 17:18:11
    有没有人出现 一个问题 语音总时间的预先加载 在安卓手机上能直接加载出来 在苹果手机上就不显示 需要点击一下才会显示替换成总时间 回复
    |╉雨寒.┵ 0
    2018/4/14 9:22:46
    和微信的简直太像了,正在琢磨多音频切换 回复
    gdbccg163 0
    2018/3/27 9:34:37
    不能单独控制吗
        cy93dan0
        2018/3/27 13:51:02
        可以的
        cy93dan1
        2018/3/27 13:54:22
        // 添加单一播放的逻辑
        $('.weixinAudio').on('click',function(event) {
           var $this = $(this);
           var currentIndex = $this.index();
           // 遍历所有对象,找到非当前点击,执行pause()方法;
           $.each(weixinAudioObj,function(i, el) {
               if(i != 'weixinAudio'+currentIndex){
                   el.pause();
               }
           });
        });
    回复
取消回复