Tuesday, November 24, 2009

How do I Embed a Sound File Into a Picture?


Like if I wanted to narrate these images so you could click one and hear me do the voices and still be seeing the picture.

I know how to record a clip in quicktime, but can I stick that clip in the picture?

Is there a simple easy way? Not with a thousand technical steps, cause I'm pretty simple.

9 comments:

Sean Volpicella said...

Click on the "Edit HTML" tab when composing a post, and copy and paste the code on this page:

(a href="mysound.mp3")(img src="mypicture.jpg")(/a)

Replacing "mysound.mp3" with the sound and "mypicture.jpg" with their respective files, of course. You have to keep the quotes.

Also, you have to replace the parenthesis with the arrow symbols, "<>", so "(" becomes "<" and ")" becomes ">". I would just post the actual code but this blog blocks it for spam reasons or something.

This will make it so when you click on whatever "mypicture.jpg" is, it will open whatever "mysound.mp3" is in the browser. I hope this helps.

Molasses said...

Hey John,

Understand what you're after. I made a vid walking you though a quick & dirty way to do it in Quicktime Pro (I think you have this since you can record audio in it).

http://molassesmurphy.com/images/Tut_Images_w_Dialogue.mov

Hope it helps. Let me know if there's anything to clarify or whatever.

Cheers

bunkerz said...

You could open the image and audio file in quicktime, copy the image and use the "add to selection and scale" paste command to paste the image into the audio file. You need quicktime pro to do this.

Lee Bretschneider said...

Based on your programming incompetence (that is not an insult), I'd say the easiest way to do it is just to get someone else to do it for you. You have enough readers one of them is bound to know flash or the javascript equivalent (which I'm assuming is another way to solve your problem). So put someone to work! Maybe you can offer a trade of some sort, like a drawing critique if they're into that kind of thing.

Laurghita said...

This is link with the image with code for sound:

http://yfrog.com/e6scr7677584j

and this is a post who show the result:

http://laurghita.blogspot.com/2009/11/embed-ed-sound-beside-image.html

Stephen Worth said...

Sean's direct link approach is the best. I would add a TARGET="clear" to have the sound appear in a separate window and not replace the current one. However, as we learned on the George Liquor talking comic, everyone seems to have their browser set to use mp3s differently. Some play in the web browser, others use an external player like iTunes. When it comes up in a separate program, it's totally messed up.

It might be clearer to just put an audio link below each image like this...

(img src="picture.jpg")
(a href="sound.mp3" target="clear")Click here for the sound(/A)

Instead of parenthesis use carat brackets.

That will put a text link to the sound below the picture. Usually people expect to see a larger version of the picture when they click on it. If you link to the sound, you can't link to the larger version too.

Pasquale said...

For usability, it's actually not the best idea to hyperlink directly to the audio file.

People with different defaults set with different browsers and OSes will get unpredictable results. It might force the sound file to open in a 3rd party player, or they could simply not have the correct codec.

I'm pretty sure you'll have more luck with blogger's native player!

pauljs75 said...

Somebody before me had an interesting idea, but it didn't work exactly right the way my browser is set up. But what piqued my curiousity is that they used audio from Archive.org. Coincidentally, archive.org has a little web player doohickey that creates a link for embedding the audio file player when clicked upon. Then it's copy-pasta time. So if you had audio hosted at archive.org, it might be pretty easy to use their little feature to put their embedded player right under your pic on your blog.

An example of their "automagically" generated embed is something like this (but replace the square brackets around the tag with regular "<>", since embedding isn't allowed in comments.):

[embed type="application/x-shockwave-flash" width="350" height="24" allowfullscreen="true" allowscriptaccess="always" src="http://www.archive.org/flow/flowplayer.commercial-3.0.5.swf" w3c="true" flashvars='config={"key":"#$b6eb72a0f2f1e29f3d4","playlist":[{"url":"http://www.archive.org/download/csr003/csr003-04-stark-effect-stop-im-watching-tv.mp3","autoPlay":false}],"clip":{"autoPlay":true},"canvas":{"backgroundColor":"0x000000","backgroundGradient":"none"},"plugins":{"audio":{"url":"http://www.archive.org/flow/flowplayer.audio-3.0.3-dev.swf"},"controls":{"playlist":true,"fullscreen":false,"gloss":"high","backgroundColor":"0x000000","backgroundGradient":"medium","sliderColor":"0x777777","progressColor":"0x777777","timeColor":"0xeeeeee","durationColor":"0x01DAFF","buttonColor":"0x333333","buttonOverColor":"0x505050"}},"contextMenu":[{"Item csr003 at archive.org":"function()"},"-","Flowplayer 3.0.5"]}'] [/embed]

Seems to work pretty easy, but you might have to delete some playlist items contained in curly brackets if you want a single item from a podcast list or album. I hope that's not too complicated.

Oliver said...

I'd use flash...