10 Stunning Examples of the Use of HTML, Javascript, Flash and Audio

While HTML5 and CSS3 are still in development, there are plenty of resources that showcase what could be accomplished with all of their new features (including audio and canvas elements of HTML5). Combined with technologies like Flash and JavaScript, HTML5/CSS3 may well lead to endless possibilities when it comes to digital art, interactive video and music.

10 Stunning Examples of the Use of HTML, Javascript, Flash and Audio


From music videos to animations - here are just some of the examples of how new technologies allow artists, designers and programmers to fuse their creativity with code in order to come up with unique projects.

Arcade Fire – The Wilderness Downtown

“The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and it uses the latest web technologies including HTML5 video, audio and canvas.

Header

As Chrome Experiments website puts it:

“Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering... this Chrome Experiment has them all.”

If you fire up Chrome, go to The Wilderness Downtown and type in your childhood address. After that you’ll see a musical montage involving streets that you grew up on and multiple windows with running figures and flying birds.

Gigaom website points out, however, that the video is a bit of a “buggy treat” as it requires plenty of processing power and doesn’t always run smoothly.

Sour – Mirror

Inspired by “Wilderness Downtown”, “Mirror” is an interactive musical video from the Japanese band Sour. It integrates your Twitter and Facebook accounts as well as your webcam in order to create an experience like no other.

Sourvid

The video also makes use of browser windows and geographical location, as it displays a Google Map of your location. The video itself involves the lead singer of Sour walking across the map, but you really have to watch it yourself, as its hard to explain what it looks like.

Although the website will ask you to log in to your Facebook and Twitter accounts, it won’t spam your followers and the webcam integration is a whole lot of fun. At the end of the video, you can download the image of yourself. To watch the video you’ll need a browser that supports HTML5.

The Limousines – Very Busy People

Director Mathieu Wothke shows how production works in this creative video for the song “Very Busy People” (which was written by San Francisco electropop band The Limousines). The creation involved a host of programs including Photoshop, Facebook and others. While not as interactive as either “The Wilderness Downtown” or “Mirror”, it should still be mentioned along with the other two for its original look at the production process.

The Limousines

As the Creators Project website puts it:

“Taking place primarily between several Photoshop windows, the video shows the real-time manipulation of images and graphics used to create the visual effects that ultimately make up the video. It’s as if someone recorded the screen capture of a graphic artist at work on the visuals, edited in some live video footage of the band singing, and set the whole thing to music. While we do kind of miss the “wow” factor of the interactivity, the video is still fun and the song is catchy, and we are kind of suckers for seeing the creative process behind a work of art coming together in this way”

The Gamits – This Shell (HTML5 Puzzle Music Video)

In this video for Denver-based band The Gamits, fans were asked to complete a puzzle as they listen to a new track. If they complete the task in time, they can download the track.

Gamits Puzzle Win

OK Go – White Knuckles – HTML5 Project Synchronization

Brian Chirls came up with this demonstration which pairs up the original video for “White Knuckles” by OK Go and a video that explains how the band created it – with both shown side by side. As Chirls explains, this “new-ish” video allows JavaScript enough control over videos, so that two of them could play in sync.

Ok Go

Both videos work like images, so you can stretch and move them around. You also won’t need any plugins, as the video should work in all major browsers, including Firefox, Chrome, Safari (and maybe IE9), but it won’t work with iPhone, iPads or Androids.

Conductor

Conductor is the brainchild of Alexander Chen – professional violinist, visual artist and Google Labs employee. It’s an interactive display that turns the lines of the subway into a musical instrument.

Alexander Chen Conductor

As trains make their way across town, they cross the line to get to their destinations and that’s when you’ll hear a pizzicato pluck/twang. You can also play the “map” by tugging on a line with your mouse. Chen explains that as a viola player, it was interesting to him to replicate a feeling of tugging on a string. He also says that he was influenced by Massimo Vignelli’s New York Subway Map, which Vignelli created in 1972.

According to Chen:

“The map is not wholly accurate — so, New Yorkers, we don’t suggest using it to get to work on time or anything. The train launch time in the lower left is apparently on par with reality, but the map is mostly an exercise in creativity. For example, the 8 train and K train, which exist on Vignelli’s map, don’t exist anymore,” Chen says. “So in my world, I run them from 12 a.m. to 2 a.m., like ghost trains.”

Still, this project can cheer up even the most jaded of subway riders.

HTML5 Canvas Experiment

9elements came up with an interesting demonstration of the abilities of HTML5. This is a self-described “little experiment” which involves 100 tweets related to HTML5 that are loaded and subsequently displayed using a Javascript-based particle engine.

HTML5 Canvas Particles 2

Each particle represents a tweet and if you click on one of them, you’ll see the tweet itself. The music will be played only if the browser supports the audio tag, with audio/canvas feature detection being carried out by modernizr library.

Vexflow

Vexflow is an open-source music notation rendering API, which was written entirely in JavaScript. It runs right in the browser and supports HTML5 Canvas and SVG.

Vexflow

alphaTab

alphaTab is a JavaScript library that allows one to embed notation/guitar tablatures into websites. It uses HTML5 to render notation, so you don’t need to install plugins like Flash or Silverlight.

alphaTab

CSS3-Man

This is an animation sequence that was inspired by the “The Spider-Man” cartoon show from the 60s. It was created by Anthony Calzadilla. Creation of the sequence involved extensive work with CSS3 and Jquery as well as HTML5.

Image

In this article, Calzadilla talks about inspiration and how the character and background art for the animation were created, among other things.

Conclusion

So there you have it – this is just the tip of the iceberg in terms of what could be accomplished with the new technologies like HTML5 and CSS3. Have you seen any other interesting sites that have made use of the mentioned technologies? Please share with us in the comments below.