Analyse von benutzerdefiniertem h5-Audio

Im Folgenden finden Sie eine kurze Diskussion über benutzerdefiniertes h5-Audio (Probleme und Lösungen). Der Inhalt ist recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden.

h5-Aktivität muss Audio einfügen, aber auch den Stil anpassen, also schreibe ich es 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 oben Gesagte kann grundsätzlich eine benutzerdefinierte Audiowiedergabe erreichen , aber beim Ziehen des Fortschrittsbalkens gab es ein Problem. Auf dem Computer war es in Ordnung, aber auf dem Mobiltelefon war die Gesamtdauer des Audios um einige Minuten kürzer als bei der normalen Wiedergabe, was zu einer ungenauen Wiedergabe führte nach dem Ziehen des Fortschrittsbalkens. 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

H5 horizontale und vertikale Bildschirmerkennungsmethode

Das obige ist der detaillierte Inhalt vonAnalyse von benutzerdefiniertem h5-Audio. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!