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

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

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>
相关插件-音频和视频

基于html5的视频播放器不依赖任何插件

基于html5的播放器插件不依赖任何框架引入即可使用
  音频和视频
 26317  87

DanMuer.jsjs弹幕插件(原创)

本插件是一个弹幕发生器,利用HTML5 canvas + ES6来实现普通弹幕和高级弹幕发送。 也有通过babel转成的ES5版,支持IE10+;版本从3.0.0开始,从重优化了性能,丰富了功能,而且本插件是个开源项目, 本人会不断更新新的功能。相比其他同类型插件来讲,本插件适用范围更广,不光适用于视频、直播,也适用于其他的一些场景。 插件继承了相关模块工具的引用接口,也可以和其他视频播放插件(如video.js等)进行有效结合, 支持高级弹幕和全局弹幕的控制和过滤,在默认配置下,在移动设备上也有良好的性
  音频和视频
 3698  21

HTML5磁带音乐播放器-CASSETTE PLAYER

相信80后之前的人都知道磁带,它是一个时代的符号,但是现在已经被MP3和电脑给完全替代了。而今天我要给大家推荐的就是一款模拟磁带的html5播放器,能用到这款插件真的是挺让人兴奋的。相信这一定会勾起你很多美好的回忆。
  音频和视频
 17035  68

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

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

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

    0
    2017/12/6 16:17:33

    那个时间,是音频的总时间,不是倒计时,不过有兴趣的可以自己改造下

        0
        2017/12/6 16:31:06

        获取播放时长的方法是:

        self.Audio.currentTime

         只要在run()(这个个定时方法)方法里修改dom就行

    回复
    0
    2017/12/6 15:55:27

    其实ios端 的自动播放是有些问题的,主要是因为ios端做了限制,这里没有解决(因已可适用大部分场景)。若要实现ios端自动播放问题,可以留言,到时候可提供一些解决方案

    回复
    0
    2017/12/6 15:51:12
    对不起,一直没有更新,今天有空更新了下;主要修复:自动播放问题(可直接通过参数选择是否自动播放),一开始时间不显示问题,报错问题。已提交审核,大家可以留意下。 回复
    卸下行囊,席地坐路旁 0
    2017/11/25 14:15:33
    joker 0
    2017/10/24 15:04:19
    作者在吗? 怎么样让同个页面拥有多个播放
        0
        2017/12/6 16:13:01
        只要多写一个控件的html,对应多实例化一遍即可
    回复
    Carlyle 0
    2017/10/23 9:15:20
    自动播放和时间问题 注掉127行的    self.play();和128行的callback(); 原因为 这个callback报错了 回复
    Carlyle 0
    2017/10/22 13:59:52
    PHP-邓佳伟 0
    2017/10/13 11:14:46

    怎么可以让这个插件在同一个页面,存在两个

        0
        2017/12/6 16:04:25
        只要多写一个控件的html,对应实例化一遍即可
    回复
    。 中意° 0
    2017/10/10 9:24:23
    不自动播放 设置 autoplay:false  回复
    L 0
    2017/9/26 19:36:19
    在 ios端 h5获取时返回NaN? 回复
取消回复