Home > Web Front-end > H5 Tutorial > body text

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

黄舟
Release: 2017-02-20 13:52:07
Original
1386 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



js

//将秒数转为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 (www.php.cn)!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!