#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:


  1. User Avatar
    Permalink to comment#

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

  2. User Avatar
    Permalink to comment#

    I love it! Thanks

  3. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    I can’t download file.

  5. User Avatar
    Permalink to comment#

    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. User Avatar
    Mike A
    Permalink to comment#

    This is not how to do it.

    This is especially more awesome on a Mac

  7. User Avatar
    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)


  8. User Avatar
    cancel bubble
    Permalink to comment#

    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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      That is VERY nice, thanks for sharing that link. I made a new example page for that player as well:


    • User Avatar
      Permalink to comment#

      Thanks for the kind mention. The point beind SoundManager 2 is to make it easier for web developer types to “embed”, play and control sounds. Since 2000 or so I’ve been playing with controlling sound trying things like JS + QuickTime, Windows Media player etc., and ultimately have found JS + Flash is the most cross-browser/platform solution currently available (until HTML 5 is widespread, etc.)

      SoundManager 2 has several demo UIs which allow load, seek and so on (eg. the Muxtape-style demo) – I also have a fun circle-based one which I’m working on, inspired by Apple’s UI from the iPhone’s iTunes preview and others.

  9. User Avatar
    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. User Avatar
    Permalink to comment#

    Awesome Chris!

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

  11. User Avatar
    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.

  12. User Avatar
    Permalink to comment#

    It’s cool !

  13. User Avatar
    Mark Freedman
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  18. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    Great stuff,thanks.!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.