多个audio播放器播放,暂停,时间控制

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wuchengzeng/article/details/51023774

<audio>标签可以在HTML5浏览器中播放音频文件。

<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>