Music

I am brand new to CSS and I was wondering if there was a way to insert music into a website. What I’m looking for is the type of music you hear right away and continuously when you go to a movie website. It plays when you enter the website and it just loops until you close the website. Like this website (once you get past the trailer) http://wwws.warnerbros.es/crazystupidlove/index.html. Thanks to anyone who can help me!

Adding my $0.02, I’d like to say “don’t do it” as well. Having autoplay audio is an instant tab killer for me, unless I absolutely have to use the site. Having the option might be nice, like Robskiwarrior said, but don’t make it play by default. If, for some reason you absolutely must put autoplay music on the site, make sure that your users can easily see (and kill) the player. I listen to music while browsing, and I find it absolutely infuriating when I open up a couple tabs and have music start playing in one of them, and not be able to easily tell by looking at the pages which one the music’s coming from. Making the player hidden and inaccessible, and you’ve earned my eternal enmity.

The only reason I could see making audio autoplay is if it’s something like a podcast episode’s page, and you make sure that the user knows the autoplay is coming, and they can still disable it easily. That’s about it, however, and I personally would still prefer to start the audio manually.

Unfortunately I had a client (Afghan Restaurant web site) just yesterday who demanded music be installed on his site, and have it auto-playing. There was nothing I could do, except give him my insight on why it is a bad idea, but he didn’t care. I searched high and dry yesterday looking for a nice html5 audio player “skinned” plugin (cross browser compatible) without any luck. I ended up using “jplayer” and used the audio he referenced. I will try custom skinning the player later today.

I can only hope this customer will receive many complaints on this audio auto-playing audio feature so I can remove it in the future lol.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.