GifMovie site

I am trying to make a plugin that will:

  1. add sounds to a gif
  2. present a gif as a ‘movie’ starting and stopping on a click.

I do not really know what I am doing. I have seen a few plugins that ‘freeze’ a gif until clicked, they seem to generate a jpg from the the gif. The approach here is different:

  1. A shortcode [gifmovie gif=’gif-url’ mp3=’mp3-url’]eg: [gifmovie gif='http://38.media.tumblr.com/5704f412385f040cb6c7e232519867c7/tumblr_npstce4Hpp1rggurro1_500.gif' mp3='http://freesound.org/data/previews/157/157873_2836235-lq.mp3']
  2. The short code adds the gif with a class of gifmovie and an attribute of mp3
  3. Javascript then adds a canvas element, put a frame from the gif on and a play button, it hides the gif. Adds an audio element for the mp3. Clicking hide canvas, shows gif and play audio.