h5 カスタム オーディオに関する簡単な説明 (問題と解決策)

黄舟
リリース: 2017-02-20 13:52:07
オリジナル
1405 人が閲覧しました

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 サイト (m.sbmmt.com) に注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート