#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.
Running time: 23:26
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
Links from Video:
Get the Flash Player to see this player.
Nice thanks! I’ve never new how to embed sounds and stuff the right way!
I love it! Thanks
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!
I can’t download file.
My bad, fixed.
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.
This is not how to do it.
http://www.andersoncolumbia.com/
This is especially more awesome on a Mac
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
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.
That is VERY nice, thanks for sharing that link. I made a new example page for that player as well:
http://css-tricks.com/examples/EmbeddingAudio/example5.html
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.
Maybe you want to check out this one: EMFF Music Player. Does not need any javascript to work and supports different skins.
Also tossed up another example page with this player:
http://css-tricks.com/examples/EmbeddingAudio/example6.html
Awesome Chris!
Me and a friend are actually going to be putting together a music blog soon and these are great alternatives :)
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
It’s cool !
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.
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.
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.