Eine kurze Diskussion über benutzerdefiniertes h5-Audio (Probleme und Lösungen)

Die h5-Aktivität muss Audio einfügen, aber auch den Stil anpassen, also schreibe ich sie selbst

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

    });

Das Obige kann grundsätzlich eine benutzerdefinierte Audiowiedergabe realisieren, es gibt jedoch ein Problem beim Ziehen des Fortschrittsbalkens. Auf dem Computer ist es in Ordnung, aber auf dem Mobiltelefon kann es gezogen werden , aber die gesamte Audiodauer ist mehrere Minuten kürzer als bei der normalen Wiedergabe, was zu einer ungenauen Wiedergabe nach dem Verschieben des Fortschritts führt. Durch Tests wurde festgestellt, dass sich die auf dem Mobiltelefon ermittelte Dauer (Gesamtdauer) von der auf dem Computer unterschied, was zu einer ungenauen Wiedergabeposition nach dem Gleiten führte. Ich habe herausgefunden, dass sich die Dauer, die ich auf meinem Telefon hatte, von der normalen unterschied, da das hochgeladene Audio von mir komprimiert wurde. Daher ändert sich nach der Komprimierung des Audios seine Dauer auf dem Mobiltelefon (nicht auf dem Computer), sodass Sie in Zukunft darauf achten sollten. Wenn es eine Möglichkeit gibt, den Ton zu komprimieren und die normale Dauer auf dem Mobiltelefon zu erhalten, lassen Sie es mich bitte wissen, haha.

Zu dieser kurzen Diskussion über benutzerdefiniertes h5-Audio (Probleme und Lösungen) gehören alle vom Herausgeber geteilten Inhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!