h5 커스텀 오디오 분석

不言원래의: 2018-06-11 17:02:021850검색

다음은 h5 커스텀 오디오(문제점 및 해결 방법)에 대한 간략한 논의입니다. 내용이 꽤 괜찮아서 지금 공유해서 참고용으로 올려드리겠습니다.

h5 활동에는 오디오를 삽입해야 하지만 스타일도 맞춤설정해야 하므로 직접 작성합니다

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

//将秒数转为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);   
});

위의 기본적으로 오디오 재생을 자체 정의할 수 있지만 진행률 표시줄을 드래그할 때 문제가 있습니다. 컴퓨터에서는 괜찮지만 휴대폰에서는 드래그할 수 있지만 오디오의 전체 재생 시간이 평소보다 몇 분 정도 짧습니다. 진행률 표시줄을 드래그한 후 재생이 발생합니다. 정확하지 않습니다. 테스트 결과, 휴대폰에서 얻은 지속 시간(총 지속 시간)이 컴퓨터에서 얻은 것과 다르기 때문에 슬라이딩 후 재생 위치가 부정확한 것으로 나타났습니다. 업로드한 오디오는 제가 압축한 것이기 때문에 휴대폰에 걸리는 시간이 일반 오디오와 다르다는 것을 알게 되었습니다. 따라서 오디오를 압축한 후에는 (컴퓨터가 아닌) 휴대폰에서 그 지속 시간이 변경되므로 앞으로는 주의를 기울여야 합니다. 오디오를 압축하고 휴대폰에서 정상적인 지속 시간을 얻을 수 있는 방법이 있다면 알려주세요, 하하.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

h5 커스텀 오디오 분석

관련 기사