波形プログレスバー

2 min read

ビジュアル波形が標準の直線プログレスバーに取って代わります。各投稿に固有のパターンが生成されるため、すべてのプレーヤーが個性的な見た目になります。ProプランおよびAgencyプランで利用できます。

有効にする方法

  1. テキスト読み上げ → プレーヤー に移動します。
  2. プログレスバースタイル波形 を選択します。
  3. 保存します。

サイト上のすべてのオーディオプレーヤーが波形を使用するようになります。

各投稿に固有のパターンが生成される理由

波形は投稿IDから導き出されたシードをもとに生成されます。これにより:

  • すべての投稿が見た目の異なる波形を持ちます
  • 同じ投稿は常に同じ波形を表示します
  • 波形は実際の音声を表すものではありません (決定論的なビジュアルパターンです)

これは静的なバーよりもはるかに見栄えがよく、ファイルサイズは一切増えません。波形は60本のバーで構成されたインラインSVGです。

クリックとドラッグでシーク

波形はインタラクティブです:

  • どこでもクリックしてその位置にジャンプできます
  • 位置インジケーターをクリック、ドラッグして音声をスクラブできます
  • デスクトップとタッチデバイスの両方で動作します

カラー設定

波形はプレーヤー設定の2色を使用します:

  • プログレスデフォルトカラー - 未再生のバー
  • プログレス再生中カラー - 再生ヘッドより後ろのバー

テキスト読み上げ → プレーヤー → カラー で変更できます。

パフォーマンス

  • 波形は単一のインラインSVGです (プレーヤーあたり約2 KB)
  • プレーヤーがすでに読み込んでいる以外のJavaScriptは不要です
  • Core Web Vitalsに影響しません

無料ユーザー向けのフォールバック

無料プランのユーザーは、波形が選択されていても直線プログレスバーが表示されます。これはPRO機能です。

関連ページ