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

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

 10554  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无任何依赖,代码注释很清楚。
  音频和视频
 25368  68

html5云特效背景音乐网站模板

html5动态特效背景,带播放器
  音频和视频
 21725  290

交互式的唱机

实验模板与一个交互式的老唱机的网络音频API。
  音频和视频
 13527  124

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 16930  112

讨论这个项目(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();
               }
           });
        });
    回复
取消回复