CSSのplay-duringプロパティとは？背景音の指定方法と使い方を解説

CSSのplay-duringプロパティは、スクリーンリーダーなどによる音声読み上げの際に、要素の内容が読み上げされている間バックグラウンドで再生するサウンドを指定するためのプロパティです。これは音声スタイルシート（Aural Style Sheets / CSS Speech）に属するプロパティで、主にアクセシビリティ向上を目的として使用されます。

指定できる値

play-duringプロパティには、以下のいずれかの値を指定できます。

• URI − <uri>で指定されたサウンドファイルが、要素の内容が読み上げされている間、背景音として再生されます。
• mix − このキーワードを指定すると、親要素のplay-duringプロパティから継承されたサウンドの再生を継続しつつ、uriで指定したサウンドとミックスして再生します。mixを指定しない場合は、その要素の背景音が親要素のサウンドに置き換わります。
• repeat − このキーワードを指定すると、サウンドが要素の読み上げ時間全体を埋めるのに短すぎる場合に繰り返し再生されます。指定しない場合は、サウンドは1回だけ再生されて停止します。
• auto − 親要素のサウンドの再生がそのまま継続されます。
• none − 無音（サイレンス）を意味します。背景音を一切鳴らさない場合に指定します。

使用例

以下のコードで、CSSのplay-duringプロパティの実装を試すことができます。

<style>
    <!--
        blockquote.sad { play-during: url("violins.aiff") }
        blockquote q { play-during: url("harp.wav") mix }
        span.quiet { play-during: none }
    -->
</style>

この例では、blockquote.sadクラスを持つ要素にはバイオリンの音源が背景音として流れ、その中のq要素ではハープの音源が親の音とミックスされて再生されます。また、span.quietクラスの要素では背景音が無音になります。

なお、play-duringプロパティは古いCSS2の音声スタイルシート仕様に含まれるもので、現在のブラウザではほとんどサポートされていません。最新の音声出力制御にはCSS Speech Moduleなど、より新しい仕様の利用が推奨されています。