Home

Awesome

_2DNote: 2D Note Generator <!-- [![npm version](https://img.shields.io/npm/v/2dnote.svg?style=flat-square)](https://www.npmjs.com/package/2dnote) --> GitHub package version License: MIT

Live Demo

Include in HTML

API

Purpose: An experiment in making visual interfaces more accessible to people who are blind. Screen readers linearize your page content, so they don't communicate 2-dimensional visuals very well. You can address that by mapping 2D positions to notes.

Potential Uses: Create 2D games and apps that people can use together, regardless of vision capabilities? Hear the contours of your signature as you write it? Enable people to "hear" what someone else is drawing? Locate elements on a page? Convert graphs into sound? Etc.

Some Design Choices: _2DNote does not rely on binaural audio, so devices with only 1 speaker can still communicate the 2D position of one or more elements simultaneously. It does that by relying on volume and pitch. Brain plasticity will take care of the rest.

You can think of the y dimension as the "proximity dimension" (louder = closer to you), and the x dimension as the "piano dimension" (left-to-right = low-to-high notes).

_2DNote.js is made from pure "vanilla" JavaScript. So no special install steps required. :smile:

To keep things as flexible as possible, you'll need to handle keyboard-only interaction. That said, you might be interested in hchiam/draggable, which focuses on letting you moving elements around with mouse, touch, keyboard, or screen reader!

Further reading

Live Demo (requires mouse or touch)

https://codepen.io/hchiam/full/eYYdVeX

(You can live edit the demo code in real time here: https://codepen.io/hchiam/pen/eYYdVeX)

Can I include it in my own HTML code?

Yes:

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/_2DNote@1.12.3/_2DNote.min.js"
  integrity="sha384-e0d2dNwg3F9WTJ3jZBF5iUeuVyAtx+zwMnCAvKMiCHtwO2l2dzo3cIMO4+Xqwn5p"
  crossorigin="anonymous"
></script>

While not recommended, you can auto-update to the latest by linking the src to:

By including _2DNote.js, you get an object _2DNote, which you can use in your HTML or JS code.

For example:

<div onmousemove="_2DNote.update(event,colourSoundIcon);">...</div>

For quick setup on the body tag:

<body>
  <script
    src="https://cdn.jsdelivr.net/gh/hchiam/_2DNote@1.12.3/_2DNote.min.js"
    integrity="sha384-e0d2dNwg3F9WTJ3jZBF5iUeuVyAtx+zwMnCAvKMiCHtwO2l2dzo3cIMO4+Xqwn5p"
    crossorigin="anonymous"
  ></script>
  <script>
    _2DNote.setAs2DArea(document.body, callbackUponUpdate);
    function callbackUponUpdate() {
      // do something whenever _2DNote.update() is triggered;
    }
  </script>
</body>

For quick setup of a custom 2D click/touch area:

<body>
  <div id="2d-area" style="width: 100vw; height: 100vh;">...</div>
  ...
  <script
    src="https://cdn.jsdelivr.net/gh/hchiam/_2DNote@1.12.3/_2DNote.min.js"
    integrity="sha384-e0d2dNwg3F9WTJ3jZBF5iUeuVyAtx+zwMnCAvKMiCHtwO2l2dzo3cIMO4+Xqwn5p"
    crossorigin="anonymous"
  ></script>
  <script>
    _2DNote.setAs2DArea(document.getElementById("2d-area"), callbackUponUpdate);
    function callbackUponUpdate() {
      // do something whenever _2DNote.update() is triggered;
    }
  </script>
</body>

To disable the "exit" sound:

var useExitDetection = false;

_2DNote.setAs2DArea(
  document.querySelector("#your_element"),
  callbackUponUpdate,
  useExitDetection
);

For a full working code example, see example-include.html

Here's an example of 2 notes playing simultaneously: example-two-notes.html

API

The things you're most likely to use are: .play(e), .update(e), .stop(), and .copy().

(Full details in _2DNote.js.)

_2DNote.audioContext:

_2DNote.note:

_2DNote.play(e, setupExitDetection = true):

_2DNote.update(e) or _2DNote.update(e, callback):

_2DNote.stop():

_2DNote.copy():

_2DNote.getFrequency(e):

_2DNote.getVolume(e):

_2DNote.getPan(e):

_2DNote.normalize(value, inputRange, outputRange):

Older version also available on NPM

(But I'd just stick to the GitHub package version.)

https://www.npmjs.com/package/2dnote

npm i 2dnote

See the notes in this example to publish to both GitHub packages page and npm packages page: https://github.com/hchiam/generator-hchiam-learning/commit/f3bbdfa93ae7c27e8d32b04f587afc644048e486 (But I'd just stick to the GitHub package version.)

If you're interested in general accessibility

https://github.com/hchiam/web-accessibility-course-notes#web-accessibility-a11y-course-notes

Other accessibility-related repos

https://github.com/hchiam/flying-focus

https://github.com/hchiam/keyboard-focus-trap

https://github.com/hchiam/draggable

Local development

bash package.sh
# do this first:
yarn publish # supply new version number in CLI

# do this second:
yarn package

A newer example of how to publish to npm (package.json setup only + yarn publish):