Speechy: HTML Slidy with Audio or Video

Alex S. Brown, PMP IPMA-C

Speechy is a cross-platform, cross-browser way to create a slide show with synchronized audio or video. All source code and examples are available for download from the Speechy SourceForge Project page. It is an open-source project, and I welcome contributions from anyone.

Speeches Available in Speehcy Format

I recommend watching these speeches in the newer, video-based formats, but the following speeches are also available in Speechy format:

December 2008 Update: New Development Discontinued

Due to changing technology and improved bandwidth for most site visitors, I suspended all new work on Speechy in December 2008. Instead this site is using a Theora video files to deliver the same information. These files were created and delivered with DVD Slideshow, ffmpeg2theora, and iTheora. These tools give a much better user experience than Speechy. Unfortunately many browser and media-player combinations did not work with Speechy, due it is use of JavaScript to control the media-player plug-ins.

There is still potential use for Speechy in very-low bandwidth situations. The file sizes can be as low as a few megabytes for an hour’s presentation. Almost all the bandwith requirements are for the audio, which can be 32 kbps or lower, depending on the format and settings. Even a highly-compressed 1-hour Theora file is around 20 MB (50 kbps). In order to get consistently playable results, I had to increase quality settings and frame-rate to create a 36 MB file (almost 100 mbps). The matching Speechy presentation can be 1/3rd of the file size.

Because the new video formats are playable on portable devices, streamable as video content, uploadable to video services, convertable to DVD format, and generally more versatile, I am no longer supporting the Speechy format.

If anyone is interested in taking over the support and development of Speechy, please contact me.

Technical Details

The core of Speechy is HTML Slidy by Dave Ragget. This wonderful software provides a fully functional slide show using just XHTML and CSS, along with some JavaScript.

I added on some new JavaScript to play audio. The script is designed to work with many audio players and browsers, and like HTML Slidy, it will provide as many functions as possible, even when the browser cannot support everything.

For instance, if JavaScript is not available, you will see a link to launch or download the audio file to play outside the browser. The slides will not synchronize with the audio, but if your system can play the audio file at all, you can listen somehow.

If there is JavaScript support, the system will try to load the Windows Media Player plug-in for Windows, or the appropriate player for the audio file under other browsers. With the right player, the slides and audio will be synchronized. Even if we did not plan for your specific player, the audio should load and play, or your browser should offer to download a player for the audio type.

Specific Players, Browsers and Platforms

I test under Windows using Internet Explorer and Firefox. The system uses web standards, so it should work under any operating system, in any web browser that supports

  • XHTML 1.0
  • Cascading Style Sheets (CSS)
  • JavaScript or EcmaScript

Under Internet Explorer, Media Player 6.4 or greater will support audio and syncrhonizing the slides to the audio. These components are both in almost any version of Windows by default. Note that with IE and Media Player, when the audio reaches the end, it will restart from the beginning, creating an infinite loop. Most other players just stop at the end.

I have also had some problems with my own laptop computer running Firefox on Microsoft Vista. The browser does not seem to allow any scripting of any media player. I cannot figure out the root cause, and the problem exists for other scripting demonstrations from VLC and QuickTime players.

To play the Speex version in Internet Explorer, you need additional software. Most Ogg Vorbis players include Speex support as well, and many excellent ones can be found at http://www.vorbis.com/. I do my Ogg testing using the Illiminable DirectShow Filters which when downloaded turn Windows Media Player into an Ogg Vorbis and Speex player. Highly recommended and a small download.

Under Firefox, there are more player choices. I have tested the MP3 and WAV files using QuickTime and the Speex files using VLC Media Player. VLC is a great cross-platform media player, and should work with Firefox under Linux for all file types. It may work as a player under other operating systems as well. Note that VLC will not synchronize the audio when you change slides.

I have seen a problem using the “seek” function in VLC. Until the problem is fixed, I disabled that feature for VLC. The slides will still advance automatically as the audio plays with VLC. QuickTime sometimes has the same problem with some audio files. I suspect that these functions only work when the player can read the total length of the audio file directly from the header of the audio file. In Ogg formats, the players often report the total length of the audio as unknown, and they have trouble seeking. I may be able to to enhance the code to try to seek by percent rather than by time. That change might allow more players to seek more of the time.

If you have another web browser and media player combination, try them out. If they support the same interfaces as any of the players and browsers above, they should work fine.

Other web sites have used Speechy to deliver on-line speeches. I welcome anyone to visit SourceForge, download Speechy, and try it out. It is free to use for any type of web site, commercial or non-commercial. Please do support this site if you find it useful.

Future Ideas

I had the following enhancement ideas, before stopping work on the project.

Add support for jlGUI Applet which would allow audio playback for any browser with JavaSound support. It supports all the audio file formats above without requiring you to download and install separate software.

Extend Speechy and HTML Slidy to allow a leader to drive the slide show for multiple people watching over the web. There are many schemes to allow simple messaging between people who are on-line, such as the ones used by web-based chat clients. If one person could become the “presenter” and others become the “audience”, then the slides could switch for all audience members every time the presenter changes a slide. It could be a very cheap and very powerful way to replace web conferencing services for simple presentations.

All future enhancements to HTML Slidy can be incorporated into Slidy as they become available. Speechy does not require any changes to Slidy. It just overrides a few behaviors and adds some new script. The wish list for HTML Slidy also includes many things I would like to see in Speechy.