Skip to content
audio map
Vue JavaScript GLSL HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


audio map



demo (desktop)

how it works

edit mode:

  • click on top left button to activate edit mode edit icon
  • click on the canvas to set the center of the circle + mouse left
  • move the mouse and click again to draw the circle ( --- + --- ) mouse left
  • drag an item from the list and drop it over a circle to assign the selected audio mouse left
  • drag and drop the none item to remove the assigned audio from a circle mouse left
  • edit the color audio by clicking on the black square near the item on the list square  mouse left
  • exit from color picker by clicking on the background mouse left
  • click on the center of an existing circle to change its position (        + mouse left)
  • click on the circumference of an existing circle to edit the radius ((       + --- )) mouse left
  • drag with left button on a circle to delete it (        + mouse right)
  • click on bottom left button to download the current map state (intervallo.json) download icon
  • drag and drop a GeoJSON feature collection on the canvas to display geolocated geometries
  • click on top left button to exit from edit mode edit icon


  • scroll the mouse wheel to zoom mouse center
  • drag the mouse wheel to pan mouse center

read only mode:

  • add a intervallo.json file in the root folder to visualize the audio map in read only mode

folders structure:

|__ /audio
|   |__ _config.json
|   |__ ... (audio files)
|__ /dist
|   |__ intervallo.js
|__ index.html

/* read only mode */

|__ intervallo.json

_config.json represents the starting data of the audio map

_config.json params:

  • center, longitude and latitude positions in EPSG 4326
  • zoom, value between 0 and 21
  • audio, list of audio files to use in the editor, original files have to be located in the same folder of _config.json (./audio)
    "center": [
        9, // longitude
        45 // latitude
    "zoom": 5,
    "audio": [


npm install

npm start

url -> http://localhost:3000/


npm run compile

output -> dist/intervallo.js

node v9.2.1

npm v5.6.0

You can’t perform that action at this time.