Through 5 interactive Chrome Experiments, Web Lab explores the extraordinary workings of the internet. Each experiment explores and demonstrates a different web theme. Worldwide visitors both online and offline will be able to play live music together, launch data into cyberspace and trace where images on the web actually live, see how robots can see people, and get teleported to unexpected places all over the world.
front-end performance is more critical then back-end performance. Front-end performance is also a critical priority for Zen. That’s why Zen 5’s markup and CSS footprint is so small. After turning on Sass production-mode compilation, the total CSS is only 14k; this includes the layout, vertical rhythm support, print styles, all the appropriate vender prefixes (like -o and -khtml), CSS3-prettified tab styling and the 3 menu images that are included via Data URIs into the CSS. Zen includes no images and only 2 JavaScripts (which are only loaded conditionally by IE8 and lower,
Front-end performance is also a critical priority for Zen. That’s why Zen 5’s markup and CSS footprint is so small. After turning on Sass production-mode compilation, the total CSS is only 14k; this includes the layout, vertical rhythm support, print styles, all the appropriate vender prefixes (like -o and -khtml), CSS3-prettified tab styling and the 3 menu images that are included via Data URIs into the CSS.
1. In Sync Mode - press play on the player and use the space bar or sync button to synchronise the words with the audio.
2. Switch to Playback Mode to see the words synched to the audio. Click on the words to play the audio from that point. Try selecting areas of text.
HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), flv
For cross-browser support, a format must be supplied that works in both HTML5 and Flash.
Optional additional formats may be supplied to increase cross-browser HTML5 support.
Some things to try :
Switch the audio from English to Danish - it should continue from the same point in Danish, subtitles and the transcript should also change appropriately.
Try clicking on words in the transcript - the audio should start playing from the corresponding point.
Highlight a passage of transcript text - this should add a tweetable excerpt to the ’share’ box.
Using Hypertranscripts we can:
Navigate through the media via the text.
Select and play parts of the media by highlighting the relevant parts of the text.
Share parts of the media creating URLs that contain start and end points.
Make our media more discoverable (via search engines)
Make our media more accessible.
More easily visualize the media.
Combine, embed and easily integrate media (using simple tools)
Mozilla’s approach was to expose a very comprehensive low level API, which potentially allows JavaScript developers to create all the functionality of Webkit’s Web Audio API and then some. As a result we get libraries like JSMad cropping up. What does JSMad do? Significantly, it allows you to play MP3s in Firefox*. Is JavaScript fast enough? Apparently so. This was a ‘this changes everything’ moment for me and since then a similar approach has been taken by pdf.js and more recently Broadway.js which decodes H.264 on the fly.