HTML5 Audio/Visualisation: Liam Stacey jailed for Muamba Tweets


In one of a final sessions last term, we had a CAST London lab session based around the dynamic use of HTML5 as a visualisation tool. One of the key things learned in this session was how to use a combination of sound and images to visualise an investigation into our research question – in my case: “Who Abuses Who on Twitter, and How do they Respond?” Following the sadly growing trend of racist tweets towards high profile sporting figures on Twitter, my attention was once again captured by a the widely reported jailing of student Liam Stacey over his abusive tweets towards collapsed footballer Farbice Muamba. A brief summary of the case from the Sky News websitereads:

Liam Stacey, 21, posted insulting remarks after the player fell on the pitch during Bolton Wanderers’ FA Cup tie against Tottenham Hotspur on March 17, Swansea Magistrates’ Court heard. Muamba, who suffered a cardiac arrest, is carried off the pitch The comments – which were made as the 23-year-old midfielder lay motionless on the ground – sparked outrage among other users of the social networking site. The first of Stacey’s messages began with “LOL (laugh out loud). **** Muamba. He’s dead!!!” Stacey then made further abusive remarks, including racist posts directed to black users. Police were inundated with complaints.

A quick Twitter crawl showed that discussion around Liam Stacey’s jail term was quite strong, with many outraged by Liam Stacey’s behaviour, and others questioning the severity of the sentence he was given, the way it was reported or if English law itself is equipped enough to deal with subject of offensive/racist behaviour on social networks. I decided that I would use my burgeoning HTML5 skills to capture the case and the discussion around the whole incident in an audio visual slideshow that reflected the slightly disrupted mood in the web sphere and in the British press surrounding this issue.

Method and tools:

To start, I wanted to find a news report that summarised the whole Liam Stacey vs. Fabrice Muamba case, and use the sound footage from it to create my HTML5 News Slide Show. I found a decent 2 minute report on the Sky New website, Sky News Report: Weeping Muamba Tweeter Jailed For Race Rant and used Quicktime to do an audio recording of it, and the free converter Online Convert to convert the resulting .mp3 file to an .ogg file so the HTML5 app can play audio files across most browser platforms. Then I tracked down a comprehensive tutorial that worked through how to create a fullscreen photo slideshow with HTML5 and jQuery. The original slideshow featured a series of New York street scenes, with a mixture of traffic noise and the sound of the shutter lens of a traditional camera taking the shots as each slide comes into view. I wanted to change these images to screenshots of the new reporting around Fabrice Muamba’s collapse, the racist tweets of Liam Stacey, and then add the collected soundcast to the resulting HTML5 slideshow.

Then, timing each shot with the pace of the Sky News report, I created a html list of the thumbnails and images that would appear in the final slideshow: Html code: Slideshow Image List Then I went into the Javascript and CSS code to tweak the size, pace and sound parameters that would finally play in the slideshow: Code parameters that hold the pointer and the flash effect when the slides change: Two empty divs are added to hold the pointer and the flash effect when the slides change. Scrollbar for thumbnails at top of NewsCast: adjustments to the jScrollPane default styles in order to get a nice scrollbar fitting our gallery

Results and Conclusion:

Finally, I uploaded the Liam Stacey vs. Fabrice Muamba HTML5 Newscast below. The big issue I had with this HTML5 Newscast was that if I embeded it in this post, it would automatically play, and the sounds and images would immediately detract from reading.  In this light, I borrowed from my previous #ididnotreport post, and used the “Easy fancy-box” WordPress plugin so that I could control the embedded auto-play iframe – thus I have linked to the image below, which will  opens my html5/javascript page into a pop-up window. I have left in the deliberately abrasive sound of the camera’s shutter going off with each slide to emphasise the divisive and uncomfortable atmosphere that was expressed in both the reporting and sentencing of Liam Stacey v. Fabrice Muamba incident. Click on the image below to open up the HTML5 Newscast (one glitch, this does not work in Safari for the Mac – any ideas on a fix would be much appreciated): Newsreel: Liam Stacey vs. Fabrice Muamba

2 Comments + Add Comment