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.
The tags are sonified with FM and the RGB values control a bass loop and a background tremolo
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 )
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.
The average color of the elements of this website is RGB[ 154, 137, 165 ], the average font is sans-serif
The average color of the elements of this website is RGB[ 85, 85, 153 ], the average font is sans-serif
The average color of the elements of this website is RGB[ 109, 138, 180 ], the average font is sans-serif
The average color of the elements of this website is RGB[ 180, 135, 126 ], the average font is serif
Some sample webpages made to make the difference between the properties ( color/ brightness and fontstyle ) extra clear.
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.
The average color of the elements of this website is RGB[ 81, 79 113 ], the average font is serif
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
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.
The average color of the elements of this website is RGB[ 217, 217, 217 ], the average font is sans-serif
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
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 ).
The average color of the elements of this website is RGB[ 119, 153, 221 ], the average font is sans-serif
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
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
The average color of the elements of this website is RGB[ 138, 27, 12 ], the average font is sans-serif
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
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.
The average color of the elements of this website is RGB[ 127, 151, 133 ], the average font is sans-serif
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
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.
The average color of the elements of this website is RGB[ 175, 128, 155 ], the average font is sans-serif
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
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).
The average color of the elements of this website is RGB[ 142, 125, 147 ], the average font is sans-serif
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
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.
The average color of the elements of this website is RGB[ 102, 115, 120 ], the average font is sans-serif
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
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
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
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
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
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.
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
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
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
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