当前位置： 文江博客 Node Package Readme 2dnote 中文文档教程

2dnote 中文文档教程

发布于 4年前 浏览 53 项目主页 更新于 3年前

_2DNote: 2D Note Generator npm versionGitHub package versionLicense: MITHitCount

现场演示

包含在 HTML 中

API

用途： 一项让盲人更容易访问视觉界面的实验。 屏幕阅读器将您的页面内容线性化，因此它们不能很好地传达二维视觉效果。 您可以通过将 2D 位置映射到音符来解决这个问题。

潜在用途：创建人们可以一起使用的 2D 游戏和应用程序，无论视觉能力如何？ 在您书写时听到您签名的轮廓？ 让人们“听到”别人在画什么？ 在页面上定位元素？ 将图形转换为声音？ 等等

一些设计选择： _2DNote 不依赖双耳音频，因此只有一个扬声器的设备仍然可以同时传达一个或多个元素的 2D 位置。 它依靠音量和音高来做到这一点。 大脑的可塑性会处理剩下的事情。

您可以将 y 维度视为“邻近维度”（声音越大 = 离您越近），将 x 维度视为“钢琴维度”（从左到右 = 低音到高音）。

_2DNote.js 由纯“香草”JavaScript 制成。 所以没有额外的依赖。 :smile:

Further reading

Live Demo

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

（您可以实时编辑演示代码时间在这里：https://codepen.io/hchiam/pen/eYYdVeX)

Can I include it in my own HTML code?

是的：< /em>

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/_2DNote@1.12.0/_2DNote.min.js"
  integrity="sha384-WdS+mavw33iD6+LA5WvOOdklYxzu60nE9DdK9RlJITvWzSJPeF8pF1ln7VrWa+yC"
  crossorigin="anonymous"
></script>

虽然不推荐，但您可以通过将 src 链接到以下内容来自动更新到最新版本：

  • https://cdn.jsdelivr.net/gh/hchiam/_2DNote@master/_2DNote.min.js or
  • https://cdn.jsdelivr.net/gh/hchiam/_2DNote@latest/_2DNote.min.js

通过包含 _2DNote.js，您可以获得一个对象 < code>_2DNote，您可以在 HTML 或 JS 代码中使用它。

例如：

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

对于 body 标签

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

的快速设置：对于自定义 2D 点击/触摸区域的快速设置：

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

要禁用“退出”声音：

var useExitDetection = false;

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

对于完整的工作代码示例，请参见 example-include.html

下面是同时播放 2 个音符的示例：< a href="https://github.com/hchiam/_2DNote/blob/master/example-two-notes.html">example-two-notes.html

API

你的东西最有可能使用的是：.play(e), .update(e)，.stop() 和 .copy ()。

（_2DNote.js 中的完整详细信息。）

_2DNote.audioContext:

  • This is the AudioContext used by the _2DNote instance to do the work of actually creating the note.

_2DNote.note:

  • This holds the information about the note (oscillator, volumeSetup) that the _2DNote instance can play.

_2DNote.play(e, setupExitDetection = true):

  • This plays a note based on the position of the element or mouse click event, which it figures out for you. (e is for event or element.)
  • setupExitDetection is an optional parameter, and is true by default. You most likely will want to do either _2DNote.play(e) or _2DNote.play(e, false). This parameter tells _2DNote whether it should play an "exit" sound when you leave the 2D area.
  • Note: The note automatically stops playing if the cursor moves outside the window. This avoids having users click something outside the window without realizing it.
  • UX reminder: If you plan to use _2DNote in only one area of the page, you should let users know when the cursor moves outside of that area. To do that, try something like <tag-name onmouseleave="_2DNote.stop();"> on the enclosing HTML element tag. See example-include.html or example-two-notes.html for examples placed on the body tag. If you'd like to disable the warnExitedView when the mouse leaves the body, then you can run document.body.removeEventListener("mouseleave",_2DNote.warnExitedView);

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

  • This causes the note that the _2DNote instance is playing to update to the current position of the element or mouse click event, which it figures out for you. (e is for event or element.)
  • callback is an optional parameter, and is a function that will be run from within update() with this signature: callback(volume, frequency, pan). See full details in _2DNote.js. See usage example in example-include.html or example-two-notes.html.

_2DNote.stop():

  • This stops the note that the _2DNote instance is currently playing.

_2DNote.copy():

  • This returns a deep clone of the _2DNote instance. Extra instances make it more convenient to play multiple notes at the same time.

_2DNote.getFrequency(e):

  • This returns the note frequency based on the x coordinate of the element or mouse click event, which it figures out for you. (e is for event or element.)

_2DNote.getVolume(e):

  • This returns the note volume based on the y coordinate of the element or mouse click event, which it figures out for you. (e is for event or element.)

_2DNote.getPan(e):

  • This returns the note panning based on the x coordinate of the element or mouse click event, which it figures out for you. (e is for event or element.) Panning creates binaural audio: if you use headphones, it'll sound like the audio is coming from the left or right side of you.

_2DNote.normalize(value, inputRange, outputRange):

  • This maps the value found within the input range ([inputRangeMin, inputRangeMax]) to be in the chosen output range ([outputRangeMin, outputRangeMax]). It returns the re-mapped value.

Also available on NPM

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

npm i 2dnote

请参阅此示例中的注释以同时发布到 GitHub 包页面和 npm 包页面: https://github.com/hchiam/generator-hchiam-learning/commit/f3bbdfa93ae7c27e8d32b04f587afc644048e486

If you're interested in general accessibility

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

Other accessibility-related repos

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

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

Local development

bash package.sh
原文

_2DNote: 2D Note Generator npm versionGitHub package versionLicense: MITHitCount

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 extra dependencies. :smile:

Further reading

Live Demo

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.0/_2DNote.min.js"
  integrity="sha384-WdS+mavw33iD6+LA5WvOOdklYxzu60nE9DdK9RlJITvWzSJPeF8pF1ln7VrWa+yC"
  crossorigin="anonymous"
></script>

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

  • https://cdn.jsdelivr.net/gh/hchiam/_2DNote@master/_2DNote.min.js or
  • https://cdn.jsdelivr.net/gh/hchiam/_2DNote@latest/_2DNote.min.js

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.0/_2DNote.min.js"
    integrity="sha384-WdS+mavw33iD6+LA5WvOOdklYxzu60nE9DdK9RlJITvWzSJPeF8pF1ln7VrWa+yC"
    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.0/_2DNote.min.js"
    integrity="sha384-WdS+mavw33iD6+LA5WvOOdklYxzu60nE9DdK9RlJITvWzSJPeF8pF1ln7VrWa+yC"
    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:

  • This is the AudioContext used by the _2DNote instance to do the work of actually creating the note.

_2DNote.note:

  • This holds the information about the note (oscillator, volumeSetup) that the _2DNote instance can play.

_2DNote.play(e, setupExitDetection = true):

  • This plays a note based on the position of the element or mouse click event, which it figures out for you. (e is for event or element.)
  • setupExitDetection is an optional parameter, and is true by default. You most likely will want to do either _2DNote.play(e) or _2DNote.play(e, false). This parameter tells _2DNote whether it should play an "exit" sound when you leave the 2D area.
  • Note: The note automatically stops playing if the cursor moves outside the window. This avoids having users click something outside the window without realizing it.
  • UX reminder: If you plan to use _2DNote in only one area of the page, you should let users know when the cursor moves outside of that area. To do that, try something like <tag-name onmouseleave="_2DNote.stop();"> on the enclosing HTML element tag. See example-include.html or example-two-notes.html for examples placed on the body tag. If you'd like to disable the warnExitedView when the mouse leaves the body, then you can run document.body.removeEventListener("mouseleave",_2DNote.warnExitedView);

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

  • This causes the note that the _2DNote instance is playing to update to the current position of the element or mouse click event, which it figures out for you. (e is for event or element.)
  • callback is an optional parameter, and is a function that will be run from within update() with this signature: callback(volume, frequency, pan). See full details in _2DNote.js. See usage example in example-include.html or example-two-notes.html.

_2DNote.stop():

  • This stops the note that the _2DNote instance is currently playing.

_2DNote.copy():

  • This returns a deep clone of the _2DNote instance. Extra instances make it more convenient to play multiple notes at the same time.

_2DNote.getFrequency(e):

  • This returns the note frequency based on the x coordinate of the element or mouse click event, which it figures out for you. (e is for event or element.)

_2DNote.getVolume(e):

  • This returns the note volume based on the y coordinate of the element or mouse click event, which it figures out for you. (e is for event or element.)

_2DNote.getPan(e):

  • This returns the note panning based on the x coordinate of the element or mouse click event, which it figures out for you. (e is for event or element.) Panning creates binaural audio: if you use headphones, it'll sound like the audio is coming from the left or right side of you.

_2DNote.normalize(value, inputRange, outputRange):

  • This maps the value found within the input range ([inputRangeMin, inputRangeMax]) to be in the chosen output range ([outputRangeMin, outputRangeMax]). It returns the re-mapped value.

Also available on NPM

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

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

Local development

bash package.sh
更多

你可能也喜欢

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文