中国福利彩票开奖结果:Intervals

February 6th, 2017. Tagged: JavaScript, Music, react, tools

Here's my new tool called intervals

intervalsui

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 ??

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.

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().

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
  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
  4. draw the two on the staff using Vex
  5. play the notes
  6. random pretty-printing and conversion from my note conventions to teoria to 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.)

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

  <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 ??

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.

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

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: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov


  • 运城市在长三角招商引资149.9亿元 2019-04-08
  • 济南五胞胎雪虎宝宝亮相 四雌一雄萌态十足 2019-04-08
  • 去产能迎年中考 煤炭、钢铁企业债务问题依然存在 2019-04-07
  • 最高检等四部门出台意见 指导依法办理恐怖活动和极端主义犯罪案件 2019-04-07
  • 广州市黄埔区人民法院公告专栏 2019-03-28
  • 这个“海之宁”是个死抱着相对论旧谬误不放,疯狂反对科学新真理的跳梁“小丑”,这个跳梁“小丑”根本就不懂得尊重客观事实及其规律,总是无视、脱离、歪曲客观... 2019-03-22
  • 如何理解孔子这句话?北大教授胡军动情论生死 2019-03-21
  • 海外舆论关注中国最新军备 称赞习近平主席强军号令 2019-03-19
  • 女性之声——全国妇联 2019-03-19
  • 美司法部科米在希拉里邮件门调查中存在过失 2019-03-17
  • “四新”彰显党的十九大思想灵魂和精髓要义 2018-08-17
  • 热身赛-U17女篮73-68立陶宛 杨舒宇19分刘禹彤13分 2018-08-16
  • 七月流火:一半是甜蜜 一半是仁慈 2018-08-15
  • “嫦娥”飞向月球背面,将会揭开哪些秘密? 2018-08-15
  • 一代枭雄身后事:“曹操墓”认定过程缘何一波三折? 2018-08-04
  • 31| 133| 273| 22| 522| 329| 52| 909| 362| 429|