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

りー

上記は基本的にカスタマイズされたオーディオ再生を実現できますが、プログレスバーをドラッグするときに問題が発生します。コンピューターでは問題ありませんが、携帯電話ではドラッグできますが、オーディオの合計時間は数分になります。通常の再生よりも短いため、ドラッグを進めた後の再生が正確ではなくなります。テストの結果、携帯電話で取得される継続時間（合計継続時間）がコンピュータで取得される継続時間と異なるため、スライド後の再生位置が不正確になることが判明しました。アップロードした音声は私が圧縮したため、携帯電話で受信した長さが通常のものと異なることがわかりました。したがって、オーディオを圧縮すると、(コンピュータではなく) 携帯電話でその長さが変化するため、今後は注意する必要があります。音声を圧縮して携帯電話で通常の長さを得る方法があれば、ぜひ教えてください（笑）。

h5 カスタム オーディオに関するこの簡単な説明 (問題と解決策) は、すべて編集者によって共有された内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。