Analyse de l'audio personnalisé h5

Ce qui suit est une brève discussion sur l'audio personnalisé h5 (problèmes et solutions). Le contenu est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

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

Le ci-dessus peut essentiellement être réalisé automatiquement. Définir la lecture audio, mais il y a un problème lorsque vous faites glisser la barre de progression sur l'ordinateur, mais elle peut être déplacée sur le téléphone mobile, mais la durée totale de l'audio est plusieurs minutes plus courte que celle-ci. la lecture normale, ce qui entraîne la lecture après avoir fait glisser la barre de progression Pas précis. 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthode de détection d'écran horizontale et verticale H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!