HTML5 media controllers, timed text tracks, CSS and SVG filters, redesigned Web Inspector

Apr 19, 2012 10:31 GMT  ·  By

Developers looking to leverage the latest web technologies in Safari are encouraged to download version 5.2 Update 3 from the Mac Dev Center, Apple has announced.

Safari 5.2 Update 3 brings Web Audio API, a high-level JavaScript API for processing and synthesizing audio in web apps.

Apple explains that “While the HTML5 audio element allows for basic streaming and audio playback, the Web Audio API is powerful enough for more complex audio applications that require mixing, processing, or filtering audio data, such as a modern game audio engine or an interactive audio production application.”

Safari 5.2 Update 3 contains an HTML5 media controller that can sync and coordinate the playback of multiple HTML5 media elements, such as a media controller overlaying a sign language interpretation track over a video track.

The new Safari keeps the two in sync, according to the release notes. The controller has the same methods and events as an HTML media element.

HTML5 timed text tracks in Safari 5.2 enable captions, subtitles, descriptions, and chapters. This can be done by specifying the timing of text that appears with an HTML5 video element.

Developers can employ CSS filters to apply pixel effects to any image or web page element with a single line of code, and they can apply functions like sepia, hue-rotate, saturate, invert, opacity, brightness, contrast, blur, grayscale, and drop-shadow, Apple said.

“Filters can be combined, and changes to the filter property can be animated with CSS transitions or animations,” according to the seed notes, which also include a table that shows various examples of CSS filters applied to the same image (displayed above).

Developers can also use SVG Filters to achieve a sophisticated layer by combining several filter primitive elements and light source elements.

Last, but not least, the Web Inspector has been redesigned to speed up common development tasks.

“It features a new all new iconography, a navigation bar that lets you easily switch between different web page elements, a persistent JavaScript console, integrated timelines, and more,” Apple says. “Additionally, JavaScript debugging is now enabled by default, and the page source view now opens in the Web Inspector automatically.”