mashup – 106 drop in

A Short Intermission

We see a deluge of media dumped into twitter, Facebook, tumblr with no context. Fwooooooooooom it goes, down the stream, with no context. Wheeeeeee.

Too bad, because I think you are missing out if you are not narrating your work.

from: The Good, The Bad, and The Puppy (and some pondering on Making / Making of)

Alan reminds us of the importance of narrating our work and learning, so here is a short story about mine at the weekend.

Over on twitter I was pointed to The Walk of Life. This is a amusing site playing with the idea the The Walk of life works with any movie ending as background music. The creator has carefully edited a spectrum of movie endings to prove his point.

A nice wee twitter chat bubbled up, until Mariana asked David what he though would be a better tune. He proposed, intermission, from the end of the Monty Python movie.

A this point I though that is might be easy and fun to make a webpage that could show a variety of videos with that music behind it.

First I needed the music. As I was reading twitter on my phone at the time, I copied the url to the intermission clip on youtube and passed it to Workflow.app. There is a workflow to convert YouTube videos to mp3s and save them to your phone. I put it in dropbox.

I then search YouTube for movie endings. Searching for ‘movie endings’ found collections of 10 best movie endings and the like, but changing the search to particular movies title and ending indicated there were enough to play with.

Moving to my computer I had a look through old projects to see if I had youtube player code handy. I did, but found out pretty quickly (these were broken) that the YouTube API had changed. Over to Google and I got this:
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google Developers

The plan was to get one movie playing with intermission in the background then change it so that different movies could be used instead.

I created a empty html page and put the intermission mp3 in the same folder. I was not intending to do anything fancy like turn the audio on and off when the movie played or paused (I don’t think that would be too hard). so I just created an audio tag: No controls so that the player would not show; autoplay and looping on.

<audio src="monty_python_and_the_holy_grail-_intermission_music.mp3" id="intermission" looping></audio>

Next I copied the example player code from the API page. I now had a page that played the movie and the audio at the same time in an appalling fashion.

Digging round the api pages, I found out how to mute the video, start it playing as soon as it loads and hide the controls.

Starting it and hiding the controls is done in script that loads up the iframe, autoplay: 1, & controls: 0.

Muting is just player.mute();

One of the problems with using google for this, is that there is often more information and answers that point to older and unsupported APIs. Sometimes it is better to look through the docs than type questions into the address bar.

Loading other movies. You can load movies into a player with:

player.loadVideoById(videoid);

Using the movie ID, the movie ID is easy to find from a youtube page URL:

https://www.youtube.com/watch?v=O0wOD9TWynM

So I could hard code a few buttons to load some different movies.

Next I want to allow folk to use their own choice of movie, so I added a field to paste in a YouTube URL. From that I would need to extract the v parameter, google took me to: javascript – how to get youtube video id from url – Stack Overflow that worked a treat.

Finally after a tweet from Alan suggesting a movie I added the ability to pass the webpage a youtube ID in the url:

http://intermission.surge.sh?v=Mwq0mgvC1eY.

Of course all of the code can be viewed in the source of Sounds Bad!.

I decided, for ease and fun to use Surge to publish the page. Surge is very neat for this sort of project, it allows, for free, the publishing on static web content from the commandline.

So what have a learned. I didn’t end up with anything earth shattering. I’ve got a couple of new snippets of JavaScript that could be used elsewhere. I’ve had a bit more practise in simple JavaScript and html. I enjoyed the process.

The featured image on this post is a gif ripped carelessly from the Monty Python and the Holy Grail- Intermission Music youtube video with MPEGStreamclip and stuck together with Fireworks.

Where in the world is ds106?

Chatting to Alan Levine yesterday we had a wee idea about putting ds106 participants on the map. I suggested that it might be an idea to use Audioboo. The RSS feeds from audioboo have location data that can be used in google map mashups. I know I already had the code to put my own Boos on a map. I had forgotten that I’ve also got a page that will map boos with any tag. For example this page will show all boos tagged ds106

http://johnjohnston.info/where/ds106

I’ve recorded a boo that will show up on the map.

listen to ‘Where is ds106’ on Audioboo

I’d like other ds106 participants to do the same. There are several ways to do this.

How to

You can record a boo using the iPhone or android application. Make sure you tag it #ds106 in the description and that the phone picks up the location:

You can go to audioboo and record (needs flash) or upload an audio file there. Again make sure you tag with #ds106

You will need a free account to record boos that are limited to 3 minutes.

The ios app adds location data, I’d presume the android one would too. If you use the browser you can set the location.

audioboo-loc-580

I am wondering if this can be a mashup assignment, so easy it would only be one star.

FlickrSounds Revisited

Or have a look by clicking this image:

Following on from my last post, I’ve paused in animating gifs when I started thinking of the sounds of gifs, this is not quite adding sounds to gifs but making image slide shows with sounds. Made with a new version of flickrSounds, very much in progress. The first version, produced a list of images and sounds, this one produces a slide show of images which play sounds. I’ve not really figured out a good interface for creation yet but have been enjoying stretching my baby steps JavaScript with a bit of json saving.

At the moment the toy just gives iframe code which might not play that nicely with some blogs. Easy enough to extract the url and link to it. If more than two folk use it I’d add a field for that.

The new version of flickrSounds saves a json description of the images and audio selected. The Show page loads this json pulls in the images and audio and produces a slide show. I’ve only tested in Safari, Firefox and Chrome on a mac.

As usual I am not sure how useful this is, Ben Rimes found it interesting but no one completed it as a ds106 Assignments: flickrSounds“>ds106 Assignment. The main thing is I had some fun.

Update

Thanks to a comment by Ben I’ve had a think about the images being of different sizes. Check Show and compare to this Show inside, the second is chosen by adding &l=t to the url.