多個audio播放器播放,暫停,時間控制

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