Analysis of h5 custom audio-H5 Tutorial-php.cn

Analysis of h5 custom audio

不言

Release： 2018-06-11 17:02:02

Original

1895 people have browsed it

The following is a brief discussion of h5 custom audio (problems and solutions). The content is quite good, so I will share it with you now and give it as a reference.

h5 activity needs to insert audio, but also needs to customize the style, so I write it myself

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>

Copy after login

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

Copy after login

//将秒数转为00:00格式 
function timeToStr(time) {   
    var m = 0,   
    s = 0,   
    _m = &#39;00&#39;,   
    _s = &#39;00&#39;;   
    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);   
});

Copy after login

The above can basically achieve custom audio playback, but in There was a problem when dragging the progress bar. It was ok on the computer, but it could be dragged on the mobile phone. However, the total duration of the audio was several minutes shorter than normal playback, resulting in inaccurate playback after dragging the progress bar. Through testing, it was found that the duration (total duration) obtained on the mobile phone was different from that on the computer, resulting in inaccurate playback position after sliding. I found out that because the uploaded audio was compressed by me, the duration I got on my phone was different from the normal one. Therefore, after the audio is compressed, its duration will change on the mobile phone (not on the computer), so you should pay attention to it in the future. If there is any way to compress the audio and get the normal duration on the mobile phone, please let me know, haha.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

H5 horizontal and vertical screen detection method

The above is the detailed content of Analysis of h5 custom audio. For more information, please follow other related articles on the PHP Chinese website!