[Crowz]

First question, given the context:

#header:hover {
	/* this is where an obnoxious cawing sound would go */
}

So, how would one play a simple audio file upon mouseover?

Then another problem: I want an audio file in my HTML document, but I do not want the user to see the audio player. How would that be done?

[Atli]

Crowz, on 07 October 2012 - 03:13 AM, said:

So, how would one play a simple audio file upon mouseover?

Using Javascript, not CSS. CSS is meant for defining appearance, Javascript is meant to add behaviour. The :hover pseudo-class, and others like it, are meant to change the appearance during a certain UI interaction, nothing more.

Your best bet for adding audio to a website is to either use a Flash audio player, or use the new HTML5 <audio> element. The main downside to Flash is that it's a unreliable 3rd party plugin. The main downsides to HTML5 <audio> is that it's not supported on older browsers, and there is no one audio format supported on all browsers; you'll have to encode the audio in at least two to cover them all.

Crowz, on 07 October 2012 - 03:13 AM, said:

I want an audio file in my HTML document, but I do not want the user to see the audio player. How would that be done?

Infrequently, as such things tend to drive users away.

However, you can do that using both Flash and HTML5 <audio> by simply hiding the player element using CSS. The visibility: hidden; style will do that, however it'll still occupy the same space as it would if it were visible. You'll have to resize it as well to avoid that.

[Crowz]

Atli, on 06 October 2012 - 10:35 PM, said:

Crowz, on 07 October 2012 - 03:13 AM, said:

So, how would one play a simple audio file upon mouseover?

Using Javascript, not CSS. CSS is meant for defining appearance, Javascript is meant to add behaviour. The :hover pseudo-class, and others like it, are meant to change the appearance during a certain UI interaction, nothing more.

Your best bet for adding audio to a website is to either use a Flash audio player, or use the new HTML5 <audio> element. The main downside to Flash is that it's a unreliable 3rd party plugin. The main downsides to HTML5 <audio> is that it's not supported on older browsers, and there is no one audio format supported on all browsers; you'll have to encode the audio in at least two to cover them all.

Crowz, on 07 October 2012 - 03:13 AM, said:

I want an audio file in my HTML document, but I do not want the user to see the audio player. How would that be done?

Infrequently, as such things tend to drive users away.

However, you can do that using both Flash and HTML5 <audio> by simply hiding the player element using CSS. The visibility: hidden; style will do that, however it'll still occupy the same space as it would if it were visible. You'll have to resize it as well to avoid that.

That off-sets my whole website to the side, even when it's hidden. under "display: none;", then it just doesn't work

[Utael]

You don't read very well do you? You may need to resize the player to not mess up your site. Another option is to disguise the player with a back ground image and set the player visible false, not sure if it would work though.

[laytonsdad]

Try this

[Atli]

Be careful if you do that, though. Using <embed> is even less reliable than Flash or <audio>, as it depends on other, less wide-spread, 3rd party plugins, like the WMP plugin or the VLC plugin. It needs a media player plugin that is capable of playing the audio, which is far from being a given thing.