CSS의 play-during 속성은 요소의 콘텐츠가 음성으로 읽히는 동안 배경 사운드로 재생할 소리를 지정하는 속성입니다. 이 속성은 주로 스크린 리더나 음성 기반 브라우징 환경에서 활용되며, 다음과 같은 값들을 사용할 수 있습니다.
- URI − 지정된
<uri>에 해당하는 사운드가 요소의 콘텐츠가 읽히는 동안 배경음으로 재생됩니다. - mix − 이 키워드가 포함되면 부모 요소의 play-during 속성에서 상속받은 사운드가 계속 재생되고, uri로 지정한 사운드가 그 위에 혼합되어 함께 들립니다. 만약 mix를 지정하지 않으면 해당 요소의 배경음이 부모 요소의 배경음을 대체합니다.
- repeat − 이 키워드가 포함되면 사운드 길이가 요소의 전체 재생 시간보다 짧을 경우 반복 재생됩니다. 지정하지 않으면 사운드가 한 번만 재생된 후 종료됩니다.
- 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>참고 사항
play-during 속성은 CSS2의 청각(Aural) 스타일시트 규격에 포함되었던 레거시 속성으로, 현재 대부분의 최신 브라우저에서는 지원되지 않습니다. 최신 웹 접근성 환경에서는 CSS Speech 모듈이나 Web Audio API 등의 대체 기술을 사용하는 것이 권장됩니다. 따라서 이 속성은 개념 이해 및 레거시 코드 분석 목적으로 참고하시기 바랍니다.