There's no audio in CSS. Why not?

Seems like the ability for a checkbox (for example) to trigger a sound when it is checked or unchecked is an inherent part of styling (audible instead of visible).

Maybe CSS can have such abilities. F.e.


input[type=checkbox] {
  audio: './path/to/pop1.mp3';
}
input[type=checkbox]:checked {
  audio: './path/to/po2.mp3';
}

and the audio only plays on state changes, not on initial styling. That way if there are 100 check boxes, 100 pop sounds don’t start playing when the page loads. So it’s like CSS animations, which start animating on a state change, and initial values are static.

2 Likes

Opening question is intriguing. :grinning:

Looking in, it looks more or less like event-based sounds - which is already possible in JavaScript. But then… the sweet spot of CSS - declarativeness - which no one says no to.

Now, it could even be better if we could create tones declaratively, just as we do create colours using RGB, HSL, etc. This can let us follow a “keyframes” approach for CSS sounds instead of downloading a file:

@keysounds sound1 {
  0%   {background: bit(0.3245);, foreground: bit(1);}
  100%   {background: bit(0.3245);, foreground: bit(0.943);}
}

div:hover {
  audio-name: sound1;
  audio-duration: 4s;
}

Please pardon whatever looks too funny, as I know nothing about properties of a sound. But being able to define sounds right in CSS @keysounds would give the browser perfect control and can minimize web sounds abuse - like inappropriately linking to long-playing music.

How does this itself sound?

2 Likes

Interesting!

I think though, we’d probably want to keep @keyframes instead of @keysounds, and then have new properties specific for the audio, for example this can allow any properties (visual or audible) to be animated the same way. For example, the following animates both audio and visuals:

@keyframes my-animation {
  0%   {
    audio-background: bit(0.3245);
    audio-foreground: bit(1);
    background-color: cornflowerblue;
  }
  100%   {
    audio-background: bit(0.3245);
    audio-foreground: bit(0.943);
    background-color: salmon;
  }
}

div:hover {
  animation: my-animation 4s;
}

If we wanted to, we could create separate @keyframes for the audio and visuals.

This is interesting though. However I’m also not 100% sure what it means to have a tree of DOM elements with audio properties on them.

For example, what does it mean if we write

div {
    audio-background: bit(0.3245);
    audio-foreground: bit(0.943);
}

and we have, say, 100 divs in the page, some of them nested in each other? EDIT: Maybe audio is exclusive to animations? EDIT: Maybe the tree of DOM nodes can represent a tree of audio nodes, where the root node is always the output node?

I wonder what are all the primitives we’d need for audio.

1 Like