Tina Sounds

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.

click the image to hear the soundtrack.

Video grabbed from ▶ Talky Tina — Living Doll — Two Minute Twilight Zone Project — Season 5, Episode 6 – YouTube just a screen capture using ScreenFlow.
A few frames extracted with MPEG Steamclip, pullined into fireworks and exported as a gif.

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:

	<audio id="tinastairs" preload loop>
	  <source src="http://www.freesound.org/data/previews/80/80916_634166-lq.ogg" type="audio/ogg">
	  <source src="http://www.freesound.org/data/previews/80/80916_634166-lq.mp3" type="audio/mpeg">
	  Your browser does not support the 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:
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.


Click the pic to toggle sound.

This tweet lead to this post, Spring into Action this Fall by Todd which lead to Todd tweeting @johnjohnston So maybe we should add some sound to the bobbing heads? which lead to this.

Of course Todd started the headless meme with another t-shirt earlier and cogdog played along

I was trying to think about how to explain ds106, but I guess this does it;-)

For me ds106 is a bit like non competitive tennis with self replicating balls that can be played on any court you like with any rules you like with the addition of be nice.


Sound: Freesound.org – “Boing.wav” by juskiddink licensed under the Attribution License.

Image: Todd using the one I tweeted as a starter.



Mashup Assignment FlickrSounds

DS106 students do not have much time left the clock is ticking…

This started as a riff on some cogdogfoo flickrSounds for #ds106 as a way of producing comic-strips of images and sounds. It gave me an opportunity to play with the flickr and free sound APIs.

It developed into a sort of slideshow of images and sound, a couple of examples.

To create a slideshow

  1. go to flickrSounds. Put in a word to search for
  2. When the image and sound load you can see alternatives by clicking he image or waveform
  3. When you have one you like click Add to Preview
  4. Repeat with more words
  5. When you have finished click Save as AV slides
  6. This will show you your slideshow and give you a bit of html to put into your blog (you need to be on text/html rather than Visual in the blog editor.

I do not think you can use iFrames in a wordpress.com blog but it should work fine on a self hosted wordpress blogs.

I’ve found that sound phrases, eg, tick tock or ‘drip drip drip’ are easier to get a reasonable result from than a quote.

I use one for my 404 here.

If I was counting I’d get stars for this and for creating a tutorial;-)