h5 커스텀 오디오 분석

不言
풀어 주다: 2018-06-11 17:02:02
원래의
1873명이 탐색했습니다.

다음은 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;   
}
로그인 후 복사

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);   
});
로그인 후 복사

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

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

관련 권장 사항:

H5 가로 및 세로 화면 감지 방법

위 내용은 h5 커스텀 오디오 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿