5 Replies - 1243 Views - Last Post: 07 October 2012 - 11:38 PM

#1 Crowz  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 68
  • Joined: 09-February 12

Playing audio within CSS and hidden audio

Posted 06 October 2012 - 08:13 PM

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?
Is This A Good Question/Topic? 0
  • +

Replies To: Playing audio within CSS and hidden audio

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3715
  • View blog
  • Posts: 5,972
  • Joined: 08-June 10

Re: Playing audio within CSS and hidden audio

Posted 06 October 2012 - 10:35 PM

View PostCrowz, 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.

View PostCrowz, 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.
Was This Post Helpful? 0
  • +
  • -

#3 Crowz  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 68
  • Joined: 09-February 12

Re: Playing audio within CSS and hidden audio

Posted 06 October 2012 - 10:47 PM

View PostAtli, on 06 October 2012 - 10:35 PM, said:

View PostCrowz, 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.

View PostCrowz, 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
Was This Post Helpful? 0
  • +
  • -

#4 Utael  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 210
  • Joined: 12-December 11

Re: Playing audio within CSS and hidden audio

Posted 06 October 2012 - 11:33 PM

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.
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 436
  • View blog
  • Posts: 1,840
  • Joined: 30-April 10

Re: Playing audio within CSS and hidden audio

Posted 07 October 2012 - 08:11 PM

Try this
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3715
  • View blog
  • Posts: 5,972
  • Joined: 08-June 10

Re: Playing audio within CSS and hidden audio

Posted 07 October 2012 - 11:38 PM

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.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1