CODEWITHSUNDEEP
cssaudiohtml
Evan H.
Evan H.

Reputation: 149

How do I play music using CSS?

How do I make music play when my page loads using CSS?

I need music to automatically play and have controls for it.

Upvotes: 3

Views: 48277

Answers (5)

Robert
Robert

Reputation: 63

I have a Gif that plays on hover using CSS. I have the MP3 file to match the Gif animation. Can some code be added within the CSS hover section that would trigger the audio file in the HTML code you have so they play at the same time?

CSS:

.animation:hover {
  cursor: pointer;
  background: url('my_animation.gif'), url('Background.jpg');
 **ADD some code here to trigger my_sound.mp3**
}

HTML:

<audio autoplay>
  <source src="my_sound.mp3" type="audio/mp3" />
</audio>

Upvotes: 2

Edwards
Edwards

Reputation: 11

I think so there is no css code. try to use this html code 

<audio controls="controls" autoplay>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

Upvotes: 1

tsukimi
tsukimi

Reputation: 1645

You can use html5 audio tag, taken from here , note which browsers are supported.

<audio controls="controls" autoplay>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

If you need to support IE8 and below consider using jplayer which has flash fallback when html5 audio is not supported.

Upvotes: 5

jrd1
jrd1

Reputation: 10716

As others have pointed out, this is not natively possible with CSS. Your only options are HTML5, JavaScript, Applets or 3rd party technologies like Flash and SilverLight. However, each of these options have their own caveats and flaws.

  1. HTML5 is not fully supported by all browsers, and will result in your page / site not having a non-consistent experience - which you wouldn't want.

  2. Javascript is probably your best bet as it is for the most part cross-browser except for text-only browers, or very lite browsers (which you may find on some earlier generation cellphones).

  3. Applets are a separate can of worms in themselves as you will have to deal with another programming language (and all its nuances), as well as the horribly annoying matter of your users having to activate the applet every time they visit or refresh the page.

  4. Flash or Silverlight is another promising alternative as they can run in any browser - provided that the operating system supports it. However, the visitors of your site / page have to have that plugin installed and enabled. If you decided to go this route, Flash is the best option as almost every computer and OS runs and supports it. However, one thing to note is that of late (past 5 years or so), Adobe has been having some security issues with Flash.

Thus, my suggestion would be:

  1. Javascript - particularly Jquery.

  2. HTML5 if you can - but supported by Javascript as a backup. Example: http://css-tricks.com/play-sound-on-hover/

  3. Flash / SilverLight and like technologies.

  4. Applets

And for a Hodgepodge of possible ways of how to do this you can visit this link: A nice collection to start is this one: http://iapdesign.com/webdev/25-awesome-html5-and-jquery-plugin-music-player/

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Music is content. CSS is presentation, not content.

You can embed audio in HTML:

<audio src="path/to/song.mp3" controls autoplay></audio>

This is minimal, though, so it won't work in Firefox for instance since it doesn't support MP3. There are tutorials for this.

Upvotes: 8

Related Questions