Your browser does not support the audio tag.Your browser does not support the audio tag.Yesterday my friend Tina told me she liked the way I gave Jim some music to dance to. I though I’d show her, and anyone else how to play a sound when a gif (or anything else) is clicked.

I made a quick gif of a scene from Tina’s work that shows what a committed and brave actor she is, I believe she does all her own stunts.

I then searched Freesound for a sound of someone falling down the stairs that was cc licensed: Freesound.org – “Falling Down Wooden Stairs.wav” by Benboncan.
In Safari I viewed the source of the page, searched for .mp3 to find the link to the low quality preview:www.freesound.org/data/previews/80/80916_634166-lq.mp3 (I took the http:// off here as wordpress embeds if I do not)

I knew that Freeview provides previews in mp3 and ogg so that we can play then with html5 and do not need any plugins (Firefox on mac needs ogg other browsers handle the mp3, this is a moving target). the ogg files have the same url but with the .ogg extension.

I started this blog post, switching to the Text (html) view in the editor and put in an audio tag:

If you are going to do this more than once on a page you need to give the audio a unique id here I used tinastairs.

You could copy the block of code above, replacing the id and the urls.Update:The way wp adds paragraphs, it is best to take out all the line breaks when you use this.

This addes the audio to the post, it is preloaded, and will loop when played, but it does not show on the page (I’ve left out the controls parameter).

I then added the gif in the normal way. In the text view this gives me:
<img src="http://johnjohnston.info/106/wp-content/uploads/2013/08/tina_stairs.gif" alt="tina_stairs" width="420" height="260" class="aligncenter size-full wp-image-854" />

I added a snippet of JavaScript to play the sound when the gif is clicked:onclick="a=document.getElementById('tinastairs');if(a.paused){a.play()}else{a.pause();}"
As a parameter of the image tag like this:<img onclick="a=document.getElementById('tinastairs');if(a.paused){a.play()}else{a.pause();}" src="http://johnjohnston.info/106/wp-content/uploads/2013/08/tina_stairs.gif" alt="tina_stairs" width="420" height="260" class="aligncenter size-full wp-image-854" />
You can see I use the id of the audio tag, again you could copy this code and use a different ID.

Hopefully Tina will love this?

I used the same process here, with different IDs but exported mp3 and ogg from Audacity, after recoding the sound from youtube.

I’ve done a fair number of Multi-Frame GIF Story Assignments and I really like them. One thing I do not like is having to have each animation at the same rate and with the same number of frames. You can work round this by ‘freeze’ framing a particular frame or several frames, but I quite like the idea of the gifs all going at their own rate and not moving in sync.

After I’d giffed a few from Perchance to Dream I though I’d try a slightly different approach. I’ve uploaded all the gifs, but instead of inserting them I created a bit of html to show the gifs.

For each gif I found out its url, eg http://johnjohnston.info/106/wp-content/uploads/2013/05/darkness.gif

I then created a img tag for each gif: <img src=”http://johnjohnston.info/106/wp-content/uploads/2013/05/darkness.gif” alt=”Darkness”>

I edit the post, putting the code to show each gif inside a single div tag, that tag has a class:

<div class=”gifgrid”> then a list of the gif tags </div>

I put in a style snippet to scale the gifs to one third of the space they are in each: <style>.gifgrid img{width:33%;float:left}</style>

I made sure there were no returns in the code.

I switched the blog editor to code vive and pasted in the code.

I’ve put the code into an external page too, if you want to have a look: perchance_grid , where you can easily view the code.

Perchance to Dream has been my favourite episode so far. I’ve not left enough time to write much about it and I’ll be stepping out of the ds106zone for the next week, which means I’ll miss audio week. I might join in the odd daly create, but if not I’ll be back in the zone next weekend.