Grow your CSS skills. Land your dream job.

#59: Embedding Audio

Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four methods/players. Two use both JavaScript and Flash, one just Flash, one just JavaScript.

Links from Video:

Download Video File

Comments

  1. Nile
    Permalink to comment#

    Nice thanks! I’ve never new how to embed sounds and stuff the right way!

  2. Ken-e
    Permalink to comment#

    I love it! Thanks

  3. Just a quick note, I was wondering how the apple script handles the canvas business in IE (7), it fails on your demo page (not on apple.com).

    IE says: “AC.HTMLPlusTimeSlideshow” is null or not an object.

    Thanks for taking the time to put these examples and screencast together, though!

  4. mokin
    Permalink to comment#

    I can’t download file.

  5. Hey Chris, I not sure if this is what you were intending but this is how I have embedded music onto my index page

    <embed src="music/web_intro.mp3" autostart="true" loop="false" hidden="true"
    volume="60" />

    On all my other pages I use a flash based player that uses an xml file to update the play list.

    Thanks for this screen cast as I’m sure I will incorporate some of this into my next rebuild.

  6. Mike A
    Permalink to comment#

    This is not how to do it.

    http://www.andersoncolumbia.com/

    This is especially more awesome on a Mac

  7. xbakesx
    Permalink to comment#

    Is it truly bad form to be using an tag? (or an tag) They are both kind of ugly, but at least you get your nice html5 video tag look in the html. Generally these are used for java applets and the like, but works fine here too. (You do have to download a plug-in, but that’s the same as flash)

    http://bakester.dsl.visi.com/css-tricks/embed.html

  8. Another JavaScript/Flash option people might want to look into is Scott Schiller’s Sound Manager, http://www.schillmania.com/projects/soundmanager/

    SoundManager is an object-oriented library/API which provides a Javascript interface to control sounds loaded in a hidden Flash movie.

  9. Daniel
    Permalink to comment#

    Maybe you want to check out this one: EMFF Music Player. Does not need any javascript to work and supports different skins.

  10. Awesome Chris!

    Me and a friend are actually going to be putting together a music blog soon and these are great alternatives :)

  11. Tom
    Permalink to comment#

    As timely as ever, just working on a record label site at the moment. This will come in handy. Thanks.
    That was a cool song in the demo btw. Kinda reminded me of Neutral Milk Hotel.
    Cheers

  12. redouane
    Permalink to comment#

    It’s cool !

  13. Great video. I’m definitely going to give a couple of them a try. As you mention, each has their pros and cons. The Apple solution is mainly just for curiosity.

  14. I’m pretty sure that the one by Apple requires QuickTime, because the file that is named circular controller makes references to QuickTime…

    Perhaps checking it in a non-QuickTime-enabled environment would confirm whether it requires QuickTime.

  15. James
    Permalink to comment#

    Just for those who may not know. The WordPress audio player does support multiple files. All u need to do is separate them with a comma. “http://www.yoursite.com/file.mp3, http://www.yoursite.com/file2.mp3, http://www.yoursite.com/file3.mp3“>My Music. There is no playlist which kind of sucks, but really cool little player none the less. Sorry if this has already been discussed. Great site by the way! Keep up the good work.

  16. Silvan
    Permalink to comment#

    I was just looking around if there are any good HTML5 players out now, as all major browsers support the audio tag now. The main problem with the HTML5 audio-tag is, that not all browsers use the same codecs. Firefox does not support mp3 while safari and IE don’t support ogg, which is kinda annoying. However I just came across a very very nice little player called jPlayer. Check it out.

  17. Permalink to comment#

    thank you for sharing this video with us… it is a great video

  18. Hi chris,

    I am looking everywhere for the apple player and some of the doc needed from the code are not online anymore can u help

  19. Oratile
    Permalink to comment#

    Great stuff,thanks.!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".