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

最新推荐文章于 2022-11-15 15:18:12 发布

云尔Websites

最新推荐文章于 2022-11-15 15:18:12 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JQuery 代码段文章标签： audio jQuery 音乐播放器控制多个audio

本文链接：https://blog.csdn.net/websites/article/details/51023774

代码段同时被 2 个专栏收录

19 篇文章

订阅专栏

JQuery

17 篇文章

订阅专栏

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