Bitsphere's Weblog

… a bitart weblog

Guerrilla Web Sounds – Part III

Leave a comment

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

Unfortunately wordpress.com does not allow to publish javascript excerpts. So Bitsphere uploaded a sample javascript which enables a HTML4 site to play sound. You find the required files on https://sourceforge.net/projects/guerillawebsnds/files.

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!

Advertisements

Drop me a line ...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s