Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
86
86
101
17.2
86
17.2
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (4)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (3.2)

基本構文

JAVASCRIPT
const video = document.querySelector('video');
video.playbackRate = 2.0;
video.preservesPitch = true; // Maintain pitch even at double speed
// Set to false to change the pitch according to the playback speed

ライブデモ

Speech speed control

Toggle preservesPitch while changing playbackRate on a spoken-audio sample.

プレビュー全画面表示

Feature explanation

Summarize how pitch preservation affects sped-up speech and voice recordings.

プレビュー全画面表示

Playback settings table

Pair speed presets with notes about typical listening scenarios.

プレビュー全画面表示

実務での使いどころ

  • preservesPitch の活用

    HTMLMediaElement.preservesPitch プロパティは、 HTMLMediaElement.playbackRate の設定で行われた再生速度の変更を補償するために、ブラウザーが音声の音程を調整すべきかどうかを決定します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。