间隔时间计算公式_间隔

间隔时间计算公式

Here's my new tool called intervals

这是我称为间隔的新工具

Play with it here.

在这里玩。

Learn about the theory behind it here.

在这里了解背后的理论。

The code for the tool.

该工具的代码。

它有什么作用？ (What does it do?)

Generates a random music interval, shows it on the musical staff. You try to guess it. Clicking on the staff reveals the answer. You can also play the interval.

生成一个随机的音乐间隔，并在乐谱上显示出来。 您尝试猜测。 单击人员即可显示答案。 您也可以播放间隔。

它是如何建造的？ (How was it built?)

It's a React app. What's React? Get the best React book and find out 🙂

这是一个React应用。 什么React？ 获得最好的React书并找出🙂

But these days you don't need to start a React app from scratch (as described in the book), you have create-react-app which generates a new app and sets up all auxiliary tools you need. Furthermore, you don't need to start a new app from an empty canvas, you can start building off of a template, thanks to CRAFT.

但是如今，您无需从头开始启动React应用程序(如书中所述)，您可以使用create-react-app生成一个新应用程序并设置所需的所有辅助工具。 此外，由于CRAFT ，您无需从空白画布上启动新应用程序，就可以从模板开始构建。

The template used is flashcards.

使用的模板是抽认卡。

So to get an app like this off the ground you go:

因此，要想获得这样的应用程序，您可以：

$ npm i -g create-react-app
$ npm i -g craftool
$ craft intervals https://github.com/stoyan/flashcards/archive/master.zip
$ cd intervals
$ npm install .
$ npm start

Tada! Sudden flashcard app, ready to go. All you need to do is implement the functions getAnswer() and getQuestion().

多田突发的抽认卡应用程序，随时可以使用。 您需要做的就是实现功能getAnswer()和getQuestion() 。

This is a bit of a specialized app, so no need to go into the gory details of the Questions and Answers. But overall:

这是一个专门的应用程序，因此无需深入研究“问题与解答”的详细内容。 但总体而言：

1. generate a random first note. e.g. F♯ on the third octave
   生成随机的第一音符。 例如在第三个八度音阶上的F♯
2. generate a random interval, e.g. a perfect forth
   产生一个随机间隔，例如一个完美的第四

3. use teoria to give you the correct second note, given a start note and an interval

   给定开始音符和间隔，使用teoria给您正确的第二音符

4. draw the two on the staff using Vex

   使用Vex在工作人员上绘制两个

5. play the notes
   弹奏音符
6. random pretty-printing and conversion from my note conventions to teoria to vex
   从我的音符约定到teoria到vex的随机漂亮打印和转换

古怪与骇客(Weirdness and hacks)

危险(danger)

Vex wants to draw an SVG inside a DOM element. (AFAIK. There may be better APIs I did not uncover.)

Vex希望在DOM元素内绘制SVG。 (AFAIK。也许我没有发现更好的API。)

So I draw the SVG in a hidden div then copy it over to React, like so:

所以我在一个隐藏的div中绘制了SVG，然后将其复制到React，如下所示：

  <div dangerouslySetInnerHTML={{__html: someSVG.outerHTML}} />

Ooooh, danger!

哦，危险！

试着抓 (try-catch)

Sometimes (rarely!) in all this randomness either teoria or vex deserts me. I think I worked out most of the kinks but still... I have a try-catch that simply generates another random question. This is pretty bad as it can theoretically freeze the browser if it fails to generate a valid question but in my testing it hasn't happened. And sometimes you gotta do what you gotta do 🙂

有时(很少！)在这种随机性中， teoria或vex我teoria 。 我想我已经解决了大多数问题，但仍然...我有一个尝试捕获，仅产生了另一个随机问题。 这非常糟糕，因为如果无法生成有效问题，理论上它可以冻结浏览器，但在我的测试中却没有发生。 有时你必须要做的事🙂

播放音讯 (Playing audio)

No WebAudio, just the ole new Audio(url).play(). I play the first note, subscribe to its ended event, play the second, subscribe to its ended and play both. Awesome. Here it goes.

没有WebAudio，只有new Audio(url).play() 。 我玩的第一个音符，订阅其ended事件，起到第二，订阅它的ended并同时播放。 太棒了来了

Except iPhone still refuses to play without human intervention, so I just play both together when iPhone is detected.

除了iPhone仍然在没有人为干预的情况下拒绝播放外，因此当检测到iPhone时，我只会一起玩。

谢谢阅读！ (Thanks for reading!)

I hope you learned a quick and easy way to create quiz apps. And also learned there's a place you can go to practice them intervals.

希望您学习了一种快速轻松的方法来创建测验应用程序。 而且还了解到有一个可以练习间歇运动的地方。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/intervals/

间隔时间计算公式