Tag: plugin

GifMovie a Plugin

I am much more excited about this than it warrants.

Hopefully just above this text you will see a canvas still image with a play button. Clicking on that should load a gif and an audio loop.

I’ve played with this sort of thing before but this is a bit more serious. A WordPress plugin!

There are a few plugins fro freezing a gif until clicked, the purpose of these is usually to save bandwidth, my plugin certainly does not. What is does in alows you to add a shortcode to a blog post:

[gifmovie gif="gifurl" mp3="mp3url"]

Where gifurl and mp3urls are proper urls.

So the one on this page looks like:

[gifmovie gif="http://johnjohnston.info/106/wp-content/uploads/2013/09/beautifulface-360.gif" mp3="http://johnjohnston.info/106/wp-content/uploads/2015/08/210569__oceanictrancer__119-bpm-house-loop.mp3"]

When the page loads this turns into a img tag with the gif with a data-mp3 attribute equal to the MP3. Some javascript then, hides the gif and creates a canvas element showing a frame. It adds code to handle clicks. These click hide the canvas, show the gif and play the sound.

I’ve been using the plugin for a few prisoner106 posts so am going to count this as a prisoner106 post. It seem to have worked with out any problem. I’d consider it in Beta.

If you are interested in trying out the plugin leave me a comment or send me a DM.

Audio Credits: Freesound.org – “119 bpm house loop” by oceanictrancer licensed under the Creative Commons 0 License.

A short excursion into code

A few posts/couple of weeks ago I installed the oEmbed HTML5 audio plugin here. This allows me to upload mp3s and other audio files, the plugin takes care of presenting the audio using the html5 audio tag with a flash fallback for browsers that do not support the type of audio: This plugin converts URLs to audio files (MP3, OGG, WAV) into HTML5 audio with Flash-based player backup
This seemed to do the trick. This morning I noticed that none of my audio was showing in FireFox. I right clicked on the space where I expected to see the player and saw the the Flash file was not loaded.

Looking at the source it seems that it is using a swf file belonging to google:
http://www.google.com/reader/ui/3523697345-audio-player.swf

and that is Error 400 Not found.

Using Cyberduck I had a look at the plugin’s code.  Part of this check to see if the file is an MP3 and the browser FireFox. firefox does not support playing of MP3 via the audio tag so the plugin uses the google Flash file, which is of course missing.
$embed = sprintf( '<embed type="application/x-shockwave-flash" flashvars="audioUrl=%1$s" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>', esc_attr($matches[0]) );
On my ‘real’ blog I usually embed audio using dewplayer so I decided to edit the plugin to use that.

I uploaded the dewplayer.swf file to the top level of my site and changed the code, I need to change the name of the var from audioUrl to mp3 and the url of the google swf to /dewplayer.swf.

If you are viewing any of my audio posts in fireFox you should hopefully be less puzzled.

Update: the plugin has been updated: WordPress › oEmbed HTML5 audio « WordPress Plugins

1.1

  • Google removed their MP3 Flash player from their website, so we include it in the plugin itself now (it’s still the same player)