I finally got around to adding sounds to the Hiragana chart. Check it out. More needs to be done but it was hell getting it all working. I didn’t feel like using flash (not supported by iPhone and iPad) and instead opted for the html 5 audio tag. Only problem is that there is no single audio format that works for more than 2 browsers. So I wrote a script that changes the audio file based on your browser. The volume control is buggy in Firefox and of course, none of this works for IE (until IE 9). Anyway, long story short, setting up audio on a webpage is still a LONG way away from being something a non-techie can do. Isn’t that kind of sad?
Tae Kim's Blog
Umm… Japanese and stuff?
You don’t need to write a special script. You can link two different audio files in the tag, and browsers will play whichever format they support.
Thanks, I’ll give that a try. I’ll see how many browsers properly support the source tag.
I wonder how smart.fm did the audio icons? http://smart.fm/goals/24666/content
That’s a CSS class.
Huh? CSS class can show the audio icon but doesn’t allow a regular link to somehow play an audio file on the same page.
There must be some sort of javascript attached to the link or something.
Doesn’t seem to.
Thats an “a” tag, with a CSS class to make the text disappear and displaying an icon instead.
The playing on the same page thing, i think it depends on the browser, ’cause the link is simply heading to an audio file. Or else, it can actually be some script, but i don’t see any javascript about it there.
You can easily dynamically attach an onclick event to a tag anywhere on the page with jquery or other js library without having any code in the tag itself. A standard A tag to an audio file will simply point the browser to a new page with an audio player. I tried it. They must have some trick up their sleeve to be able to play it inline. I’d like to know what it is.
True. Well, thats probably some javascript, but i’m not so expert about it so i can’t say how did they do it, sorry.
I tried out jplayer (a jquery plugin).
It lets you give flash to older browsers and does HTML5 for browsers that support it. It also deals with the format issue for you and is a fully customizable player.
I just want to play audio clips on different parts of a page with a simple icon. jplayer seems to be a full fledged player that has to sit somewhere on your page, not what I’m looking for.
This is one the cases when one should choose the “standard” choice to do something, hoping that browsers will adapt to users. Unfortunately, it seems that are web developers who has to adapt to what browsers decide.
Instead of dividing by browser, perhaps you should divide by device. Check if the user’s browser has flash installed; if it does, use the flash version. If it doesn’t, you know it’s the iphone or ipad, which only uses safari, so you’ll only need one sound format.
That’s true but I didn’t use flash because I don’t own software to convert audio to swf files.
Well, let me know if you’d like me to make anything.
The following has worked flawlessly in every major browser since late 1994:
<a href=”mysound.wav”>Click here to open the sound.</a>
Pretty much every computer that has the ability to play sound will know what to do with a wav file, and these days most of them know what to do with an mp3 file as well. FLAC, unfortunately, is not so widely supported, so I would stick with either wav or mp3 for now.
In the previous browser generation (before Firefox), the browser would just pass the file off to the operating system, which was responsible for knowing what program should be used to open that type of file. IMO that was the correct way to do things. These days, a lot of browsers keep their own “helper application” list, independent of and redundant with the OS associations. (I think the main reason they do this is so they can use their own custom dialog box to ask the user whether to save the file or open it with Name Of Application. There’s also the matter of letting the user specify that they want to open Acrobat Reader in a separate window, rather than embedded in the browser window as Adobe insists on setting the default.)
But either way, the correct software (something that can open the type of file in question and play it) will be found and used, automatically. All the user has to do is click the link and then click the “Open” button, and the sound plays. That’s one more click than you would ideally want, but it WORKS, consistently, in every browser, on every operating system. Dorking around with Javascript and HTML5 (to say nothing of plugins) is most definitely NOT an improvement. Unless you’re trying to do some kind of weird DRM or something (WHY?), just give the user the sound file and let them play it in whatever their preferred (or default) sound player happens to be. Keep it simple.
I hear what you’re saying…and I definitely appreciate having the ability to download the sound files if I want them.
But sometimes it’s nice to have a interface where you can just click, and the sound will play in browser. Your solution often requires an external program to open up.
Hey Tae Kim,
Your post got me curious so I did a quick investigation.
They’re using jQuery like you suspected:
http://assets2.smart.fm/javascripts/base_packaged.js?1275550255
It appears that their initialization jQuery code executes an inline embedPlayer() function, which utilizes SWFObject to dynamically embed a Flash audio player with dimensions 1 pixel by 1 pixel…
http://www.smart.fm/html5/javascripts/audio/audioplayer.swf
They register the audio links themselves as instances of their “audio icon” jQuery class. They have JavaScript associated with the “audio icon” class to use their “soundManager” (the Flash audio player) to load and play any file given in the href parameter of a corresponding “audio icon” class link.
e.g: <a href=”http://assets3.smart.fm/assets/legacy/JLL/audio/Kana_a.mp3″ rel=”audio” class=”audio icon”>
Well, at least that’s what I was able to understand without getting into the nitty gritty details. Seems a bit troublesome if you ask me haha…but it shouldn’t be too difficult to implement a simpler and similar system of your own. So if you’re still curious, then you should take a look at their jQuery source (first link I posted), and search for phrases like “audio icon”, “soundManager”, and “embedPlayer()”. Since a lot of their HTML code is also dynamically added/loaded, you should select all the text on the page (Ctrl-A or Command-A), right-click, and select “View Selection Source” to see the source code with the dynamically loaded bits (FireFox). I’m sure you could figure out the rest of the details yourself from there.
Good Luck!
P.S. Great Guide
Interesting, thanks! Since I’m not using flash, I guess I need to figure how to play a file in a HTML 5 audio tag with javascript.
hi Kim!! nice to meet you!!