Une brève discussion sur l'audio personnalisé h5 (problèmes et solutions)

L'activité h5 doit insérer de l'audio, mais doit également personnaliser le style, donc je l'écris moi-même

html

<!-- cur表示当前时间 max表示总时长 input表示进度条 -->  

    <span class=&#39;cur&#39;></span><input type="range" min=0 max=100 class=&#39;range&#39; value=0><span class=&#39;max&#39;></span>

css

/* 进度条 */  

    .range {   

        width: 5.875rem;   

        height: 0.15rem;   

        background: #2386e4;   

        border-radius: 0.25rem;   

        -webkit-appearance: none !important;   

        position: absolute;   

        top: 3.55rem;   

        left: 6rem;    

    }   

    /* 进度滑块 */  

    .range::-webkit-slider-thumb {   

        width: 0.5rem;   

        height: 0.5rem;   

        background: #fff;   

        border: 1px solid #f18900;   

        cursor: pointer;   

        border-radius: 0.25rem;   

        -webkit-appearance: none !important;   

    }

js

//将秒数转为00:00格式   

    function timeToStr(time) {   

        var m = 0,   

        s = 0,   

        _m = '00',   

        _s = '00';   

        time = Math.floor(time % 3600);   

        m = Math.floor(time / 60);   

        s = Math.floor(time % 60);   

        _s = s < 10 ? &#39;0&#39; + s : s + &#39;&#39;;   

        _m = m < 10 ? &#39;0&#39; + m : m + &#39;&#39;;   

        return _m + ":" + _s;   

    }   

    //触发播放事件   

    $(&#39;.play&#39;).on(&#39;click&#39;,function(){   

        var audio=document.getElementById(&#39;ao&#39;);   

        audio.play();   

        setInterval(function(){   

            var t=parseInt(audio.currentTime);   

        $(".range").attr({&#39;max&#39;:751});   

        $(&#39;.max&#39;).html(timeToStr(751));   

            $(".range").val(t);   

        $(&#39;.cur&#39;).text(timeToStr(t));   

        },1000);   

    });   

    //监听滑块，可以拖动   

    $(".range").on(&#39;change&#39;,function(){   

        document.getElementById(&#39;ao&#39;).currentTime=this.value;$(".range").val(this.value);   

    });

Ce qui précède peut essentiellement réaliser une lecture audio personnalisée, mais il y a un problème lorsque vous faites glisser la barre de progression. Tout va bien sur l'ordinateur, mais elle peut être déplacée sur le téléphone mobile. , mais l'audio total La durée est plusieurs minutes plus courte que la lecture normale, ce qui entraîne une lecture inexacte après avoir fait glisser la progression. Grâce à des tests, il a été constaté que la durée (durée totale) obtenue sur le téléphone mobile était différente de celle sur l'ordinateur, ce qui entraînait une position de lecture inexacte après le glissement. J'ai découvert que, comme l'audio téléchargé avait été compressé par moi, la durée que j'avais sur mon téléphone était différente de la durée normale. Par conséquent, une fois l'audio compressé, sa durée changera sur le téléphone mobile (pas sur l'ordinateur), vous devrez donc y prêter attention à l'avenir. S'il existe un moyen de compresser l'audio et d'obtenir la durée normale sur le téléphone mobile, faites-le moi savoir, haha.

À propos de cette brève discussion sur l'audio personnalisé h5 (problèmes et solutions) se trouve tout le contenu partagé par l'éditeur. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !