多个audio播放器播放,暂停,时间控制
2016-03-31 10:13
549 查看
<audio>标签可以在HTML5浏览器中播放音频文件。
<audio>默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。
这里我使用jQuery来进行控制的代码如下:
<audio>默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。
这里我使用jQuery来进行控制的代码如下:
<?php if(!empty($val['voices'])){foreach($val['voices'] as $k=>$v){?><div class="list-audio"> <p><?php echo $v['title'];?></p> <div class="mius"> <div class="sche allTime">0</div> <div class="progress"></div> <div class="times currentTime">00:00</div> <div class="nsa"></div> <div class="play playon" data-audio="<?php echo $v['voice'];?>" data-currentTime="0" data-duration="<?php echo $v['duration'];?>"></div> <div class="stron hide"></div> <div class="clear"></div> </div> </div> <?php }} ?>
<audio class="audio"></audio>
<script> jQuery(function(){ var $audio=jQuery("audio"); var $audioInterval=''; jQuery(".play").each(function(){ jQuery(this).removeClass("pauseon").addClass("playon"); timeChange(jQuery(this).attr('data-duration'),jQuery(".allTime",jQuery(this).parent())); }); jQuery(".play").on('click',function(){ clearInterval($audioInterval); ($audio.get(0)).pause(); var $this=jQuery(this); if($this.hasClass('pauseon')){ jQuery(this).removeClass("pauseon").addClass("playon"); }else{ jQuery(".play").each(function(){ jQuery(this).removeClass("pauseon").addClass("playon"); }); $this.addClass("pauseon").removeClass("playon"); $audio.attr('src',$this.attr('data-audio')); ($audio.get(0)).currentTime=$this.attr('data-currentTime'); ($audio.get(0)).play(); $audioInterval=setInterval(function() { var currentTime = ($audio.get(0)).currentTime; $this.attr('data-currentTime',currentTime); timeChange(currentTime,jQuery(".currentTime",$this.parent())); return false; },1000); } }); function timeChange(time,timePlace){ //分钟 var minute = time / 60; var minutes = parseInt(minute); if (minutes < 10) { minutes = "0" + minutes; } //秒 var second = time % 60; seconds = parseInt(second); if (seconds < 10) { seconds = "0" + seconds; } var currentTime = "" + minutes + "" + ":" + "" + seconds + ""; timePlace.html(currentTime); } }); </script>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码