Soundscape

Mashing-Up
With Nkia Maps

Massimiliano Marcon (@mmarcon)
Simon Madine (@thingsinjars)

May 8, 2012

Game - City Exploration Experience

• Hamstery
• HTML5/CSS3
• All about being on the edge: only Chrome support, even better with Canary
• Mixes maps, geolocated environmental sounds, events information and images for a full exploration experience

Soundscape

• As the user moves the flying hamster around we set the listener position (lat, lon) and orientation (radians) into our Audio object.
• When the user requests sounds the application pulls sounds (via XHR) from Freesound for the viewport bounding-box and events from LastFM located around the center of the map. If there are events we retrieve the corresponding mp3 from Deezer.
• The Web Audio API takes care of playing sounds based on location and orientation of the listener.

Challenges

• Cross-Origin Resources. Deezer serves mp3 w/o Access-Control-Allow-Origin: *
• Streaming format for mp3s. Mp3s are served for streaming. Web Audio doesn't like that.
• High memory & CPU utilization.

How we did it

Demo (soundscape.nodester.com)

APIs

• Nokia Maps (http://api.maps.nokia.com) - for maps, markers, bubbles
• Freesound (http://www.freesound.org/docs/api) - to pull environmental sounds
• Last FM (http://www.last.fm/api) - to retrieve events
• Deezer (http://developers.deezer.com/api) - to pull previews of popular songs by artist

Links

• GIT repository
  https://github.com/mmarcon/htm5Hackathon
• Demo
  http://soundscape.nodester.com
• These slides
  http://mmarcon.github.com/slides/soundscape
• Authors
  @thingsinjars, @mmarcon

Thank you!