JavaScript はオーディオ コントロール プログレス バーを実装します

前書き: 宿題などで HTML5、CSS、JavaScript を使えるようになったところですが、まだ高速レベルでしかなく、まだまだ問題がたくさんあったので、使い方を記録しておくことにしました。インターネット上で見つけるのが難しい、または理解するのが難しいものは、今後の参考のために保管し、同じ問題に遭遇した人々の参考になれば幸いです。

このブログでは主に、JS を使用してオーディオ用の自家製のシンプルなプログレス バーを実装すること、および再生ジャンプや再生時間の変更について説明します。その理由は、ブラウザー (私は Firefox を使用しています) の組み込みコントロールがページのスタイルに合わないように感じるためです。

Firefox では次のようになります:

完了すると、次のようになります:

実際、プログレスバーのアイデアは非常にシンプルです。全長が必要で、次に全長が必要です。色と幅を除いて同じもの（たとえば、ここでは 2 つの細長い長方形）を同じ開始位置に配置し、オーディオの再生時に setInterval を使用します。関数は、指定された期間 (ミリ秒単位) に従って関数または計算式を呼び出すことができます。 1 秒ごと (もちろん、1 秒でない場合はそれ以下で、後続の計算で変更することを忘れないでください) の進行の長さが長くなります。バーが最初の0から最後の全長まで比例するように、シンプルなプログレスバーが完成します。

setInterval メソッドについては、こちらを参照してください

プログレスバーをマウスでクリックしてオーディオの再生を変更するには、マウスの座標を知る必要があります。一般的な考え方は、マウスがプログレス バーの p 領域をクリックしたときのみマウスの座標を取得することです。 したがって、取得された x 座標から CSS で指定されたプログレス バーの開始 x 座標 (.プログレス バー) は、マウスのクリック位置です。この長さをプログレス バーの全長で割って、オーディオの合計の長さを乗算します。マウスでクリックした位置に応じて再生されるはずなので、audio の fastSeek 機能を使ってジャンプします。

関連する CSS&HTML&JS コードを以下に示します。JS の使用は、明確に理解するために非常に冗長であるため、参照のみを目的としています。

コードで言及されているのは、マウスの x 座標を取得するだけでよいということです。なぜなら、ここで実装されているプログレス バーは非常に単純で、水平方向にのみ伸びるため、同様に x 方向にのみ計算できます。垂直の場合、方向性のあるプログレス バーには y 座標のみが必要です。円形のプログレス バーの場合は、両方が必要になる場合があります。

以上がJavaScript はオーディオ コントロール プログレス バーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。