音频进度条设置

最新推荐文章于 2024-04-25 16:39:42 发布

原创

最新推荐文章于 2024-04-25 16:39:42 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#audio #进度条

本文详细介绍了如何在网页中集成音频元素，并实现音频播放的进度条控制。通过使用HTML5的Audio API，可以获取音频播放进度，同步更新进度条的状态，提供用户友好的播放体验。同时，讨论了如何处理播放、暂停、缓冲等事件，确保进度条的准确反映音频的实时状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
     *  播放audio标签视频控制
     *
    */
    //等待音频加载完毕  点击每一段录音进行播放
    $('.lis').click(function(){
        $('.j_voiceCont').show();
        var src = $(this).attr("src");
        $(this).addClass('cur').siblings().removeClass('cur');
        $("#audios").attr('src',src);
        if($("#audios")[0]){
            var medias = $("#audios").get(0);
            if($("#audios")[0].addEventListener){
                $("#audios")[0].addEventListener("loadedmetadata", function(){
                    var duration = Math.ceil(this.duration);  //获取总时间
                    //控制播放暂停
                    $('.voiceReady').addClass('voicePlaying');
                    medias.play();
                    loadedmetadata(medias,duration)
                })
            }else{
                $("#audios")[0].attachEvent("loadedmetadata", function(){
                    var duration = Math.ceil(this.duration);  //获取总时间
                    //控制播放暂停
                    $('.voiceReady').addClass('voicePlaying');
                    medias.play();
                    loadedmetadata(medias,duration)
                })  
            }
        }
    });
    /**
     * 可应用于倒计时
     * 该函数求我们已知秒数求小时，分钟，秒的具体时间，
     * h---小时
     * m---分钟
     * s---秒数
     * 如果h，m,s小于10，显示的样式为 01
     * 如果计算没有小时，那么将不显示小时
     * @param {Object} val
     */
    function getShowTime(val){
        var h = Math.floor(val/3600);
        var m = Math.floor((val - h*3600)/60);
        var s = Math.floor(val - h*3600 - m*60);
        h = h<10?"0"+h:h;
        m = m<10?"0"+m:m;
        s = s<10?"0"+s:s;
        //判断为00,是因为上面进行了字符串的拼接
        if(h == "00"){
            return m+":"+s;
        }else{
            return h+":"+m+":"+s;
        }
    }
    //控制音频函数
    function loadedmetadata(medias,duration){
        $('.v_timesEnd').html(getShowTime(duration));
        //控制播放暂停
        $('.voiceReady').click(function(){
            var that = $(this);
            console.log(medias.paused)
            if(!medias.paused){
                that.removeClass('voicePlaying')
                medias.pause();
            }else{
                that.addClass('voicePlaying');
                medias.play();
            }
        });
         /**
         * 音频滑动条
        */
        //获取进度条总宽度
        var totalLen = $('#sliderInner').width();
        var $sliderTrack = $('#sliderTrack'),
                $sliderHandler = $('#sliderHandler'),
                percent,
                dist,
                startLeft = 0,
                startX = 0;
        $sliderHandler.on('touchstart', function (e) {
            startLeft = parseInt($sliderHandler.css('left'));
            startX = e.changedTouches[0].clientX;
        }).on('touchmove', function(e){
            dist = startLeft + e.changedTouches[0].clientX - startX;
            dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
            percent =  parseInt(dist / totalLen * 100);