Musical Browser

Proceed to the tests

This a the demonstration page of my graduation project for Mediatechnology on the University of Leiden. The musical browser is an atempt to sonify webpages. With a graphical browser.

There are a lot of elements which could be interpreted, for this exploration of website sonification I will focus on 3 aspects: the tags, color ( or light and darkness ) and if the majority of the fonts are with or without serif.

Experimenting with sonification of the 3 aspects ( all examples interpret ( www.nu.nl )

First example

The tags are sonified with FM and the RGB values control a bass loop and a background tremolo

listen to the sound sample

Second example

The tags are sonified with two interferring saw waves combined with a low resfilter the background is formed by crossfading between a cycle poly object and a saw poly object. If the average color is dark the saw poly will be more prominent ( for this webpage the value was 0.64, so little more saw )

listen to the sound sample

Third example

The tags are sonified with FM. The background is formed a saw and two cycles the saw is is the red value an increased red value increases the tempo of the red, the onther two cycles are determined by green and blue. The font-style switches between a bass drum an a beep with a slight tremor, the bass is for sans-serif fonts.

listen to the sound sample

Some sound samples of the final patch

sample of www.nu.nl

The average color of the elements of this website is RGB[ 154, 137, 165 ], the average font is sans-serif

listen to the sound sample

sample of www.liacs.nl

The average color of the elements of this website is RGB[ 85, 85, 153 ], the average font is sans-serif

listen to the sound sample

sample of www.volkskrant.nl

The average color of the elements of this website is RGB[ 109, 138, 180 ], the average font is sans-serif

listen to the sound sample

sample of www.gelderlander.nl

The average color of the elements of this website is RGB[ 180, 135, 126 ], the average font is serif

listen to the sound sample

Musical browser tests

Test 1: Interpretable elements

Some sample webpages made to make the difference between the properties ( color/ brightness and fontstyle ) extra clear.

Colortest: White elements on black page

White elements on black page, click for demo page

listen to the sound sample

Colortest: Black elements on white page

Black elements on white page, click for demo page

listen to the sound sample

Colortest: Average color towards red

Red elements on white page, click for demo page

listen to the sound sample

Colortest: Average color towards green/ blue

Green/ blue elements on white page, click for demo page

listen to the sound sample

Font test: Serif font-style

These fonts are specific styled with a Serif font-style, like; Times New Roman or Georgia, click for demo page

listen to the sound sample

Font test: Sans-serif font-style

These fonts are specific styled with a Sans-serif font-style, like; Arial or Helvetica, click for demo page

listen to the sound sample

Test 2: websites with a dominant property

prediction for www.guardian.co.uk

A site with dark elements, therefore a continuous polyphone saw sound every three seconds the tremolo sound for the serif fontstyle. The site has a lot of list with links so there should be a lot of short, highpitched sounds.

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 81, 79 113 ], the average font is serif

analysis of the sonification

The sonification sounds less dark than predicted, the polyphone sine can still be heard clearly. The tags are a more diverse than predicted. I expected long patterns with links. The indication for the serif fontstyle is easy to detect

prediction for www.sp.nl

A site with a lot of red elements, so I expext a fast polyphone sound. Alle the elements are red or medium gray, therefore I do not think that the saw polyphone sound will be dominant The site is acombination of a blog and a page with a lot of links, I expect a mixture of repeating patterns and semantic elements.

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 217, 217, 217 ], the average font is sans-serif

analysis of the sonification

The sonification sounds less dark than predicted, the polyphone sine can still be heard clearly. The tags are a more diverse than predicted. I expected long patterns with links. The indication for the serif fontstyle is easy to detect

prediction for www.bol.com

A site with a lot of blue elements, the overall style is blue and black, I expect the polypohone sound to be slow. I expect that the saw and sine polyphone sound play with equal amplitude. The homepage has a very large navigation menu, a lot of links tags with high pitches sould sound in patterns ( waves of link groups ).

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 119, 153, 221 ], the average font is sans-serif

analysis of the sonification

The polyphone is indeed very slow, however the amplitude of the sine polyphone is much higher than expected. The tag sound sounds more lower than I had imagined. That must mean the that the site has a lot of structural elements

prediction for www.gothicfestival.be

A dark site I expect the saw polyphone sound to be dominant and a little bit faster because the elements are orange and yellow. The site displays a lot of picture and is structured, thus I expect a lot of low pitched tag sounds

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 138, 27, 12 ], the average font is sans-serif

analysis of the sonification

The saw wave is indeed dominant, I even cannot hear the bass anymore which indicates that the overall font-style is sans-serif, but still I hear the sine polyphone sound more clear than expected. Most of the tags sound with a low pitch, as predicted

prediction for www.kpn.com

A site with green and blue elements, I expect the polyphone sound to be very slow. This page shows relatively little content, therefore I expect the tagsounds to dominantly structursal with sounds with a low pitch. I estimate that the page colors have an everage brightness, so there will be no dominant polyphone sound.

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 127, 151, 133 ], the average font is sans-serif

analysis of the sonification

The polyphone sounds faster than expected, that might is caused by the fact that the red value still is strong in the average color. The tag sound revealed a lot more lists with links than I expected

Test 3: websites without a dominant property

prediction for www.arnhem.nl

A site with light and dark elements, therefore a continuous polyphone saw sound combined with a polyphone sine, pink [red] elements are dominant therefore the polyphone sound plays faster than normal. Every three seconds the bass sound for the sans-serif fontstyle. The site has a lot of structural elements so the average tag sound should have a lower pitch.

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 175, 128, 155 ], the average font is sans-serif

analysis of the sonification

I expected the more tagsounds with a low pitch, it seems to be that the webpage still has a lot of interactive elements. All the other aspects sound more or les as expected

prediction for www.insideria.com

A site with light and dark elements, mainly black, blue and white, therefore a continuous polyphone saw sound combined with a polyphone sine. Every three seconds the bass sound for the sans-serif fontstyle. The site is a listing of blog posts therfore I expect a lot of headings (<h1>) and paragraphs (<p>) with a middle pitch (700-1100 HZ).

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 142, 125, 147 ], the average font is sans-serif

analysis of the sonification

My expectation of an average pitch sound because of the headings and paragraphs is true. Also the average brightness sound though by the equal amplitude of the saw and the sine polyphone sound. Note that the site looks red but all the red elements are made with images

prediction for www.processing.org

This looks like an average site all I even think that the color is average, even the balance between red and blue/ green is equal, the font-style is sans-serif, so the bass will sound. For the tags I see a lot of list so I expect many repeating structures.

listen to the sound sample

facts

The average color of the elements of this website is RGB[ 102, 115, 120 ], the average font is sans-serif

analysis of the sonification

The sonification does reveal a lot repeating tag structures in the sound, the webpage is however less balanced then I thought because the saw polyphone sound was more prominent

Test 4: Interpretation of the sonification of unseen webpages

Analysis of the sonification www.zeist.nl

The background music is slow, every three second the bass sounds thus the font-style is sans-serif. I expect the brightness of the page to be average I hear the polyphone sine wave with a little more amplitude. For the tags a lot of low ptiched tags can be heard I hear so there should be a lot of structural tags

listen to the sound sample

Webpage prediction

I think the elements of the webpage have an overal green/ blue color, many pictures and the website has a lot of columns and almost no links in the beginning links but more in the end of the page

Facts and review of the prediction

The average color of the elements of this website is RGB[ 131, 164, 179 ], the average font is sans-serif

The website as indeed blue and green elements but the webpage looks has a lot more lighter elements than I heard and the website has a lot of columns, to make columns you need structural tags which I heard a lot. There are however links in the beginning which i did not hear

Analysis of the sonification www.badminton.nl

The background music is faster than average and I hear the saw polyphone sound more dominant. The bass sounds in the background. In the middle and in the end of the webpage a lot of high-pitched sounds van be heard

listen to the sound sample

Webpage prediction

I think the elements of the webpage have an overal red/yellow or brown color, I expect a lot of dark elements, in the middle of the page are a lot of links.

Facts and review of the prediction

The average color of the elements of this website is RGB[ 156, 113, 127 ], the average font is sans-serif

The website has a lot of orange elements, my color prediction was in the right direction. The page shows indeed a long list of links in the middle column

Analysis of the sonification www.christenunie.nl

The background sound is a little slow and the saw wave is dominating. The bass sounds in the background. I hear a lot of links in various patterns, sometimes links nested in structural patterns. But the end of the page exists mainly of links

listen to the sound sample

Webpage prediction

The webpage has a lot of average color but slighly more (dark)blue/ (dark)green and dark elements the font-style is sans-serif, and the webpage is full of links especially at the end

Facts and review of the prediction

The average color of the elements of this website is RGB[ 43, 92, 146 ], the average font is sans-serif

The webpage is a lot more blue than I expected bt it is indeed dark blue than I heard, to make columns you need structural tags which I heard a lot. There are however links in the beginning which i did not hear

ao2p60x18u