00:00
61
More
See all Show me
13. Hello World
3 years ago
12. Page Bot
4 years ago
11. SVG to OSC
4 years ago
10. Finally found a use for the NY Times
4 years ago
9. SVG to Quicktime
4 years ago
8. SVG Midi Sequencer
4 years ago
7. Offline Image Archiver
4 years ago
6. Lily Tutorial 3
4 years ago
5. Lily Tutorial 2
4 years ago
4. Lily Tutorial 1
4 years ago
3. CLI DOM Explorer
4 years ago
2. Drawing the DOM
4 years ago
1. Math
4 years ago
Ever wondered what a web site sounds like? Not the words, but the actual data on the site itself? Here's a Lily application that let's you "play" the data in a web page like an instrument.

When the patch starts, the browser enters a DOM inspection mode and mousing over a DOM element highlights the node. Clicking on a node writes the element's data (its innerHTML value if it's a text element or the binary data if it's an image) as a sound file and the file is then loaded in a quicktime player in the patch. The sounds can then be triggered using OSC messages. While a DOM element is "playing", the browser scrolls to and highlights the element with a thick black border.

In the video, I'm spazzing out on the NY Times homepage using the monome controller, but the demo should work with any OSC enabled controller. Sound conversion code based in part on a javascript port of the baudio project.

More information available at lilyapp.org

Credits

Likes

See all likes
  • % 4 years ago
    excellently ridiculous
  •  
  • Kyle McDonald plus 3 years ago
    Really beautifully noisy use of directly transcoded html->audio.
  •  
  • _____ce 2 years ago
    well this is exciting.
  •  
This conversation is missing your voice. Take five seconds to join Vimeo or log in.

Advertisement

About this video

FLV
00:01:01
  • 504x380, 4.71MB
  • Uploaded Mon January 21, 2008
  • Please join or log in to download

Statistics

Date Plays Comments
Totals 20K 28 3
Feb 15th 1 0 0
Feb 14th 2 0 0
Feb 13th 4 0 0
Feb 12th 2 0 0
Feb 11th 7 0 0
Feb 10th 5 0 0
Feb 9th 1 0 0

Related lessons from Vimeo Video School

Check out these lessons to learn more about how you can make videos like this one!