# Twitter powered subtitles: Creation and playback for SMIL 3.0 SMILText, *.srt and Timed Text (BBC iPlayer)

[![Twitter Subtitles in BBC iPlayer](https://hawksey.info/wp-content/uploads/2010/02/image_thumb.png "Twitter Subtitles in BBC iPlayer")](https://hawksey.info/wp-content/uploads/2010/02/image3.png) Since my first post on [Twitter powered subtitles for BBC iPlayer](https://hawksey.info/blog/2010/02/twitter-powered-subtitles-for-bbc-iplayer/) Tony Hirst has put together another interesting post presenting [a method for curating supplemental content for students](http://ouseful.wordpress.com/2010/02/22/scheduling-content-round-the-edges-supporting-oubbc-co_productions/) using his [DeliTV](http://ouseful.wordpress.com/2009/09/02/delicious-tv-personally-programmed-social-television-channels-on-boxee-preview/). Tony finishes his post commenting that it would be useful to see how timed text could be used to supplement radio broadcasts with either embedded subtitles or a standalone player.

In my original post I mentioned that I tried the [smilText JavaScript engine](http://code.google.com/p/smiltext-javascript/) without any success. I also had a looked at how radio broadcasts are delivered via BBC iPlayer. As the majority aren’t available for download and the BBC are phasing out RealAudio next month ([RealAudio can be synchronised with RealText for captioning](http://www.skillsforaccess.org.uk/howto.php?id=136)) these were also dead-ends (I did however come across [iPlayer Converter](http://www.iplayerconverter.co.uk/) which is useful if you *“want to be able to access BBC Radio programming but can't use the iPlayer”*). I also had a look at Tony’s suggested [Accessible HTML5 Video with JavaScripted captions](http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/), again a dead-end without converting audio into a compatibly format.

Having exhausted these other avenues I decided to have another look at the smilText JavaScript engine again and guess what I got it to work! So as well as adding a real-time twitter player it made sense to add some other additional features below:

- **Real-time twitter playback using smilText JavaScript engine**
- [SMIL 3.0 SMILText](http://www.w3.org/TR/SMIL/smil-text.html#q26) **creation/download**
- [SubRip .srt](http://en.wikipedia.org/wiki/SubRip) **creation/download**
- [Timed Text Authoring Format](http://www.w3.org/TR/2006/CR-ttaf1-dfxp-20061116/) **creation/download (used with BBC iPlayer and others)**
- **API access documentation**
 
And here is the link to the tool:

\*\*\* [Twitter Powered Subtitles Tool](http://hawksey.info/ititle/) \*\*\*

## How I got it to work

So what did I do wrong? Quite a bit as it turns out:

1. Didn’t import all of the scripts for the JavaScript SMILText Player. In my defence the official documentation was a little missleading.
2. Understanding the SMILText schema (need a &lt;tev&gt; before a &lt;clear&gt;???)
3. Using closing tags like this &lt;tev /&gt; instead of &lt;tev&gt;&lt;/tev&gt;. Don’t know if this was because of the DOCTYPE was wrong or the way the JavaScript parsed the document.
4. smilText JavaScript engine doesn’t appear to implement [hh:mm:ss ClockValueSyntax](http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-timing.html#Timing-ClockValueSyntax)
 
## Observations and further development

It is worth noting that smilText JavaScript engine doesn’t appear to automatically wrap on white-spaces. I don’t no if this is a limitation of the engine or the SMIL language. I also wanted to keep &lt;a&gt; tags in browser playback but this doesn’t appear to be part of [SMIL 3.0 smilText](http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-text-profile.html#q11).

How this tool/concept be further developed? The playback browser is very basic but could be easily enhanced with some TLC. The [smilText JavaScript API](http://smiltext-javascript.googlecode.com/svn/trunk/docs/1.1/index.html) has some useful methods which could easily be exploited. There is also the question of how this tool could be integrated into other services like [Twapper Keeper](http://twapperkeeper.com/), [opensubtitles.org](http://www.opensubtitles.org/en) (which is used by [boxee](http://www.boxee.tv/) and others) or [FanHubz](http://fanhu.bz/).

As always the [source code is available here](http://www.mediafire.com/file/z2zmxnqkdnj/twitter-sub-0.2.zip) for further development.