A brief discussion on h5 custom audio (problems and solutions)-H5 Tutorial-php.cn

A brief discussion on h5 custom audio (problems and solutions)

黄舟

Release： 2017-02-20 13:52:07

Original

1404 people have browsed it

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 realize customized audio playback, but there is a problem when dragging the progress bar. It is ok on the computer, but it can be dragged on the mobile phone, but the total audio duration is less than normal playback. It took several minutes, resulting in inaccurate playback after dragging the progress. 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.

About this brief discussion on h5 custom audio (problems and solutions) is all the content shared by the editor. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!