PDA

View Full Version : CSS to use wav files



glidealong
September 5th, 2007, 08:47 AM
I had an interview last week and one of the questions asked was "Is it possible to play a sound using CSS?" .
I replied in the negative since i had no prior knowledge about the same. On searching the net, i found that no one had a single working example and all the answers tend to be negative. But on querying w3c i found something called pseudo-elements http://www.w3schools.com/css/css_pseudo_elements.asp
Below is the relevant section.
CSS2 - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before an element.
The style below will play a sound before each occurrence of an <h1> element:
h1:before
{
content: url(beep.wav)
}

CSS2 - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after an element.
The style below will play a sound after each occurrence of an <h1> element:
h1:after
{
content: url(beep.wav)
}
--------------------------------------------------------------------------------------
It works perfectly when i used a image file but not with a sound file.

Anybody got some clue???

Thanks to all...

thats all folks
September 5th, 2007, 09:14 AM
Never seen that before, I can't recall anyone using CSS for sound, except for hiding a div with a swf.

lab9design
September 5th, 2007, 10:37 AM
I had an interview last week and one of the questions asked was "Is it possible to play a sound using CSS?" .
I replied in the negative since i had no prior knowledge about the same. On searching the net, i found that no one had a single working example and all the answers tend to be negative. But on querying w3c i found something called pseudo-elements http://www.w3schools.com/css/css_pseudo_elements.asp
Below is the relevant section.
CSS2 - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before an element.
The style below will play a sound before each occurrence of an <h1> element:
h1:before
{
content: url(beep.wav)
}

CSS2 - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after an element.
The style below will play a sound after each occurrence of an <h1> element:
h1:after
{
content: url(beep.wav)
}
--------------------------------------------------------------------------------------
It works perfectly when i used a image file but not with a sound file.

Anybody got some clue???

Thanks to all...

Sorry - haven't tried it myself but that's an interesting one, thanks - will have to play around with it and see if I can get it working! On a different note, the :before and :after pseudo-element are quite interesting, because while permissible according to CSS2 standards, they actually break the underlying primary concept of CSS - that you are separating style and content! Go figure?!

Hope you get the job :)

glidealong
September 6th, 2007, 09:23 AM
On a different note, the :before and :after pseudo-element are quite interesting, because while permissible according to CSS2 standards, they actually break the underlying primary concept of CSS - that you are separating style and content!

Yeahh.. it sounded like mixing content with style.. but the question is whether a sound played in response to a hover or lostfocus action is a part of style or content?.. i guess a sound file used to narrate text is content.. and the small sound files used in response to user interaction is more like a style element...

Thank You