Web-audio options without Flash?

September 17, 2009 1:00 PM

WebDesignFilter! Is there a way to have an mp3 play in the current page when a user clicks a gif image? Can this be done without using flash?

Imagine a page with a short story that has clickable pics along the way... and when you click a pic, you hear an extra piece of the story, or some related info. The pics would be basic gif or jpeg image files.

I realize I could use some sort of button-based flash audio player (I'm quite fond of the Wimpy button, normally), but I'm trying to avoid flash, and the buttons would take away from the look of the minimalist design, unless I could use the images from the story as the buttons.

I want this to work in IE, Safari, Firefox, and hopefully on an iPhone too.
I don't want people to have to install a new plugin to access the audio.
And, naturally, I don't want the user to be taken to a blank page where the audio plays.

Is this possible?
Thoughts?
Ideas?
Workarounds?

posted by 2oh1 to Computers & Internet (13 answers total)

As far as I know no browser plays mp3s natively. Flash or some other kind of plugin would be your only choice. Not sure if there's something that would also work with iPhones though since it doesn't support Flash.

You should be able to use the pictures as buttons by attaching onclick events to them that would trigger the mp3 player. The details of how it's done would probably depend on the player you use and the details of how you want the presentation.
posted by kmz at 1:04 PM on September 17, 2009

Embedded Flash is the "correct" and most common way to do this, because browsers don't speak MP3. So something else has to play the music.

That means your choices are (a) hand it off to a helper application like iTunes or WMP, or (b) embed the application right into the web page. The way this is done in browsers is with plug-ins, and the most common plug in for playing audio (and more) is Flash.

As for using a picture... well it's a Flash movie. So it can be a button or image or photo or whatever you like. Or you can use a regular GIF/PNG/whatever image in your HTML to trigger the embedded object.
posted by rokusan at 1:07 PM on September 17, 2009

You'd be able to do this with just html and javascript in html 5, but browsers aren't quite there yet.
posted by utsutsu at 1:15 PM on September 17, 2009

The scriptaculous javascript library includes a sound module which does not depend on Flash to handle audio playback, including MP3s. (Peeking at the source code, it appears to hand the audio off to different methods depending on the browser and on available plugins.)

I haven't used it in any real-life projects and haven't personally tested how extensive the browser compatibility is, but for the little bit I've played around with it, it did work fine.
posted by ook at 2:47 PM on September 17, 2009 [1 favorite]

Best answer: Just embed it directly, and the browser's native player should handle it. If this doesn't work for MP3, then transcode your audio to WAV and try that. I just tested MP3 like this

<EMBED SRC="filename.mp3">

and it worked on Safari on a Mac, but I know that WAV works on all browsers and platforms that I've tested.
posted by nicwolff at 3:20 PM on September 17, 2009

Best answer: Oh — and to make it play when you click an image, do this:

<EMBED SRC="filename.mp3" EnableJavaScript="true" NAME="sound_1" AUTOPLAY="false" WIDTH=1 HEIGHT=1>
<IMG SRC="image.png" onClick="document.sound_1.Play()">

posted by nicwolff at 3:24 PM on September 17, 2009

Response by poster: Drat! The Scriptaculous demo worked on Safari, but when I tried it in Firefox, it played the audio, but it also kicked out an error about needing a plugin (which Firefox could not identify).

On the other hand, nickwolf's solution seems to have lots of potential! Now I just need to figure out how to turn the image into a rollover to denote that it's clickable in a more user-friendly way.
posted by 2oh1 at 4:25 PM on September 17, 2009

Response by poster: Also, I can post wav files. I'd just prefer mp3s since they'll be in stereo, and roughly 10 to 45 seconds long. Sound quality matters (though I won't bother posting above 128 bit mp3s), but I want the files to be as small as possible.
posted by 2oh1 at 4:28 PM on September 17, 2009

Well that's easily done with Javascript — I'll recommend the jQuery framework if you're not already using it, it makes binding hover and click handlers to all the elements with a given class a one-step process.
posted by nicwolff at 4:34 PM on September 17, 2009

Response by poster: I am indeed using some jQuery (though I'm very much a novice). I normally use css for rollovers, but that method doesn't seem to work in this instance.
posted by 2oh1 at 4:46 PM on September 17, 2009

Best answer: Just so it's here if people search for this later, here's how to make the images play and pause the sound files when clicked.

<script type="text/javascript" charset="utf-8">

  function playPause (movie) {
    if ( document[movie].GetRate() > 0 ) {
      document[movie].Stop();
    } else {
      document[movie].Play();
    }
  }

</script>

<EMBED SRC="audio-1.mp3" EnableJavaScript="true" NAME="sound-1" AUTOPLAY="false" WIDTH=1 HEIGHT=1>
<IMG SRC="image-1.png" onClick="playPause('sound-1')">

<EMBED SRC="audio-2.mp3" EnableJavaScript="true" NAME="sound-2" AUTOPLAY="false" WIDTH=1 HEIGHT=1>
<IMG SRC="image-2.png" onClick="playPause('sound-2')">


posted by nicwolff at 3:06 PM on September 18, 2009

Sending an MP3 directly to the browser, as the JS examples here do, is still going to run an external player for many users/browsers, depending on what they have installed.

If you're okay with that, cool, but many people aren't, which is why they use embedded Flash.
posted by rokusan at 10:22 AM on September 20, 2009

Response by poster: Yeah, I realize I'll probably have to go with a wav file. That's fine. My real goal here is to build without flash and have a design that functions effortlessly for the user (again, without using flash).
posted by 2oh1 at 4:24 PM on September 20, 2009