What you are seeing above is a Flickr Image where I have made an audio note that you can click on to listen to!
I had seen a project called Audiosticker.com by Tangible media group and Creative synthesis @ MIT that was similar, but you had to open the audio player in another window and wasn't very seamless. I wanted a solution I could use on my own blog, with my own embedded images, and my own notes.
This is the solution I came up with. I plan on rolling it all together to truly make it seamless, but this DIY article is all you get for now.
Step one:
I uploaded a mp3 to my Wordpress blog and created a href link inside the note on Flickr.
Step Two:
Use this bookmarklet from Yuan.cc when you are on the Flickr photo you want to embed.
I found a php script that would allow you to embed your Flickr images with the notes on a remote site.
Yuan.cc is a web site with lots of web experiments. This is where I found my solution. He even had a nice little bookmarklet that gives you the code to copy and paste your embedded image with your notes! Just drag that link to your bookmark bar and click when you are on the flickr photo page you want to embed.
Step Three:
Create a new blog post, or page with the code from above.
Step Four:
You will also need to add the a bit of javascript from del.icio.us in order to play the mp3 directly on your site.
This is the code to add to your page (you can add it inside the post):
<script type="text/javascript" src="http://static.delicious.com/js/playtagger.js"></script>
There you have it, now go out there and voice annotate your images!
;%20})()){kind=link}