play-during

The play-during property allows you to specify a background sound that you want to play with a tag. It is a bit like a background colour or picture. You can add a background sound to any tag on the page. When the browser speaks the content of the tag, it plays the background sound as well.

You specify a url for the sound. For example:

body {play-during: url(mysound.mid);}
h1   {play-during: url(mysound.mid);}

All the tags contained within a tag with a background sound have that same background sound. The sound doesn't restart as the browser speaks each tag; it plays continuously. This makes sense; you don't want your background music to restart every time the browser reads a new paragraph.

It isn't very likely that your background sound is exactly the same length as the spoken content of its tag. If the sound is too long for the tag, it is clipped once the tag has been spoken. If the sound is too short, it plays once and then lets the tag's content finish.

If you want your background sound to repeat until the tag's content is finished, add the keyword repeat to the play-during property after the URL. This is similar to the background-repeat property.

This example makes sure that the sound is exactly as long as your tag's spoken content.

p {play-during: url(sound1.mid) repeat;}

Normally, the tag’s background sound replaces the parent tag’s background sound. If you add the mix keyword to the play-during property, the browser will play the two background sounds together:

body { play-during : url(guitar.au) repeat}
p    { play-during : url(drums.au) repeat mix}

Finally, use the keyword none to remove any background sound from a tag. This overrides any parent tag's background sound and you get a blissful silence.

If you are going to do this, choose a subtle and appropriate background sound. A lurid background picture makes a page unpleasant to look at: an annoying background sound makes a page difficult to listen to.