Towards the end of last year Bitsphere published two posts about Guerrilla Web Sounds: part I which is about the concept and part II about the implementation on bitsphere.ch. This post is the third part of this series.
To give other people the possibility to enhance their website with tunes Bitsphere has uploaded six sounds to http://soundcloud.com/bitsphere-sounds. The set consists of sounds from the office environment so it perfect fits the purpose to come merely unrecognized by people apart from those calling your web site. The names of the sounds almost speak for themself:
- Dropping key – recorded from an old keyboard key dropping on a table
- Keyboard scratching desk – the sound of a keyboard scratching on a desk when moved like unintended
- Key pressed – a record of pressing a key on a keyboard
- Mouse click – the sound of pressing a mouse button
- Opening pen – the recording of the sound of someone opening a pen
- Sheets rustling – sheets rustling on desk
The lines relevant to play sound in the html file are the span-tag which acts as a container for the sound file which is empty in the beginning and the onMouseOver – trigger assigned to a link, but you may use any tag you like. It makes the html call the playSound.js when the mouse passes the element.
The playSound.js script fills the empty span in the .html with the sound file and play this according to the settings. In the example over at sourceforge there is a mp3 in use but if you prefer you could use any other web compliant format.
So with this code you are able to to play the sounds at soundcloud mentioned above or even your own files.
If you have questions about the code, remarks on the sound files or ideas about bringing sound to the web just use the comment section!