Vocalo.org: Public Media For The People

Vocalo.org is a bold new concept in community media: a complex social media website and an associated broadcast radio station in Chicago, IL.

Vocalo.org is a place for people to compose and share stories -- including images, audio, and video -- with their fellow users. User-generated content is broadcast on the radio station as well as made available on the website for licensed remixing. Vocalo users span the globe, while the broadcast radio station (89.5 FM) and local focus keep the project true to its roots.

Vocalo.org also engages the community with free "Media Creation Workshops" in Chicago-area communities.

The Vocalo.org website was created by the Chicago Technology Cooperative (CTC) on behalf of Chicago Public Radio, using a heavily customized version of Drupal 6. The current version of the site began development in November 2007 and was launched on May 15th, 2008.

Major features:

Integration with the broadcast system at the radio station for syncing on-air playlists and schedules with the website and allowing hosts to easily broadcast user-generated audio on the air.

A cross-browser, AJAX-enabled media library allowing users to seamlessly upload images, audio clips, video files, and media from 3rd party sites like YouTube into an online WYSIWYG editor with a drag-and-drop interface.

Telephone podcasting which allows users to call a hotline and record audio content directly onto the site using only their telephone.
A full palette of online community features including social networking, private and instant messaging, and folksonomy.

CTC was able to leverage the robust contributed module space in the Drupal community, help propel those efforts on to Drupal 6, and develop a new social media platform -- Scald -- to fulfill the vision of the Vocalo project. In the words of Vocalo.org's Online Community Manager, Shannon Heffernan:

CTC has the creativity to develop tools outside the realm of what Drupal provided. It's exciting to work with an organization that is committed to finding specific custom solutions for our needs, while considering how we could both benefit from and contribute to the Open Source Community.

Background:

The original Vocalo.org pilot site, which was built on Drupal 5, was launched in May 2007 after two months of rapid development by CTC. The initial site included some broadcast integration features, basic social networking capabilities, and the ability for users to upload images, audio, and video clips. This early community media sharing functionality was implemented using CCK and Views.

Multiple iterations of the site were released over the summer of 2007, culminating in a version 1.6 release in the early fall. During this period, the broadcast and community media model rapidly evolved with input from Vocalo early adopters, staff, and hosts. The radio broadcast was limited to a small test market on the outskirts of Chicago, and the site was not heavily promoted.

As the concept and pilot site became increasingly popular, Vocalo.org staff and CTC developers jointly developed a plan for implementing Vocalo.org 2.0 with a suite of new features and more sophisticated media management tools for both users and on-air hosts. Plans are underway to heavily promote the site as the on-air radio broadcast footprint expands from the smaller test market to millions of potential listeners in the Chicago metropolitan area in September 2008.

The requirements of the site -- large numbers of content items, sophisticated design, video and audio transcoding, real-time media broadcasting, and an increasing number of users -- demanded that scalability and performance be considered high priority. Though Drupal 6 was still in active development, it was clear that building against Drupal 5 would not satisfy the site's requirements.

Media enabled nodes:

Vocalo.org needed to exercise fine-grained control over the display of media in different areas of the site. Sometimes an uploaded video should be a direct link, sometimes a thumbnail, sometimes presented using a Flash-based player. As developers, CTC faced a competing concern: how to manage highly specified theming without creating a system too complicated to be easily modified or maintained.

The solution was to introduce the concept of display contexts. Each major content type has a global default template, but it can be overridden based on both specific node type and the current display context. Following Drupal conventions, every theme retains the power to override the defaults to account for the idiosyncracies of the particular type of media in question, and allows for the targeting of special cases without duplicating common ones.

The display layer depends on two indispensable modules: Media Mover (which was ported to Drupal 6 by CTC developer Brandon Bergren AKA bdragon) and Imagecache. These modules, and the underlying free software libraries they use, provide the display layer with a powerful set of tools for converting, manipulating, and repurposing an incredible range of media.

Vocalo.org wanted users to go beyond simply uploading a few files -- users should be able to use their media to tell stories via personal blogs, and information about the media used in a post must be available for theming and search. Using Drupal's Input Filters, Scald tracks the use of media in Vocalo's blog posts and attaches information about included media for use elsewhere within Drupal.

Type, Upload, Drag:

The Vocalo.org post creation system creates a cohesive platform for all of Vocalo's content creation tasks: uploading media, browsing one's own and others' media, and the ability to smoothly combine rich media and text into stories. Type, upload, drag: Vocalo.org makes creating stories and uploading media simple and fast.

The custom form workflow and UI depends on a customized version of WYMEditor, and drew heavily from the popups project to provide the user with a swift method for uploading media. On the back end, a modified upload module handles file type detection and utilizes Media Mover to handle the necessary conversions. All the user does is upload a file.

Frustrated by the common conventions for media attachment in other editors, CTC developers Brandon Bergren (bdragon) and David Eads (davideads) created a WYMEditor plugin to allow the user to click and drag media from their library to a blog post, and to see how the media will look in their post. Here, the Scald contextual rendering system found a powerful use: when a user “drops” audio or video into the post editor, what she sees looks like a Flash player, but is really a simple facsimile created with minimal XHTML and CSS. This makes it easy for the editor to manipulate these items, and sidesteps several browser inconsistencies and bugs.

In the database, media used inside blog posts is represented with simple tags which are interpreted and rendered when the posts are displayed. This simple format means that Scald is compatible with a huge variety of rich editors and even the lowly text box.

The Chicago Technology Cooperative's David Eads is actively involved in developing the new, ground-up rewrite of WYMEditor, and bringing it to Drupal.

The media library uses the Scald Data API to allow the user to search and select Scald-adapted nodes based on a variety of characteristics including author, title, description, taxonomy terms, Scald Unified Type, publication status, etc. Scald will work with Views 2 to provide powerful query building to end users, but retains the Scald Data API to allow developers a more specific and efficient method for sifting through media content.

Beyond the the web:

To engage with the broad, demographically diverse population of Chicago, Vocalo.org wanted to provide users with a way to publish their content online without Internet access. CTC developed a telephone podcasting module using the OneBox voicemail service, though the module could be used with any number of similar services.

The system is dead-simple and incredibly robust: A user registers her phone number by adding it to her profile. When the Vocalo OneBox receives a message from the registered number, the audio is automatically posted to her blog.

For the Vocalo.org, this message is attached to a custom node type. Phone audio nodes have a Scald Adapter, which allow them to interact seamlessly with the site. However, the module can easily be extended to route and process the audio in a wide variety of ways. This is another of the modules CTC is planning to release in the very near future.

Online and on-air:

Hosts needed the ability to put together playlists of user-generated and third party content and also to notify users that their content will be on the air. The website needed to provide users with accurate information about the station's broadcast schedule and live broadcast. Additionally the website needed to provide users with ways to interact with the broadcast while online.

To engage users online with the spontaneous nature of the live broadcast, CTC developed a lean, efficient chat system dubbed the ShoutBox. The live hosts post questions to the online audience and discuss the responses on the broadcast. The ShoutBox helps blur the lines between "listener", "user", and "participant".

To help hosts, CTC wrote a custom playlist module which provides the ability to build playlists out of contributed media as well as arbitrary data. To further engage the audience, the playlist module contains a notification system that lets users know their media will be on-air by sending them an email or a private message. The playlist module exploits the Scald system with a drag-and-drop interface and robust search tools for the hosts.

Social networking tools:

The social networking functions of Vocalo.org were effectively met by the existing set of social networking tools in the Drupal contrib space (Buddylist, Privatemsg, Service Links, and Fivestar). When CTC began development of the site, many of these modules were not ported to Drupal 6, so CTC ported and modified them to fit Vocalo's specific needs.

Future development:

As Vocalo.org continues to grow as a site and a community, additional features will continue to be added. Current plans for the future include additional media management tools and more mobile integration, such as the ability to publish multimedia content directly from a mobile phone or handheld. In addition, many community media organizations have been exposed to Vocalo.org and are planning similar efforts in their own communities.

Free software, public media:

With Vocalo.org, Chicago Public Radio has demonstrated that it is on the forefront of bringing the values and traditions of public broadcast media into the so-called Web 2.0 era. The strength and flexibility of Drupal have helped make Vocalo.org the success it is as a place to share, discuss, and interact.

As active participants in the Drupal ecology, a team of CTC developers led by Tom Wolf (t-dub) are currently modularizing much of the custom code created for Vocalo.org so that it can be published on drupal.org. CTC developers will be involved in actively maintaining, extending, and supporting Scald into the forseeable future. In addition, many of the changes and optimizations made to other contrib modules, including Drupal 5-to-Drupal 6 ports, have already been submitted back upstream.

CTC is honored to have the opportunity to help bring this vision into being, and in the spirit of public media, to both draw on the incredible efforts of others to create and nourish Drupal and the many other free software tools used, and to share the fruits of our labor with the Drupal community.