{"id":1886,"date":"2017-02-06T01:08:05","date_gmt":"2017-02-06T06:08:05","guid":{"rendered":"http:\/\/www.phpied.com\/?p=1886"},"modified":"2017-02-06T01:14:03","modified_gmt":"2017-02-06T06:14:03","slug":"intervals","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/intervals\/","title":{"rendered":"Intervals"},"content":{"rendered":"

Here's my new tool called intervals<\/a><\/p>\n

\"intervalsui\"<\/p>\n

Play with it here<\/a>. <\/p>\n

Learn about the theory behind it here<\/a>.<\/p>\n

The code for the tool<\/a>.<\/p>\n

What does it do?<\/h2>\n

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.<\/p>\n

How was it built?<\/h2>\n

It's a React app. What's React? Get the best React book<\/a> and find out \ud83d\ude42<\/p>\n

But these days you don't need to start a React app from scratch (as described in the book), you have create-react-app<\/a> 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<\/a>.<\/p>\n

The template used is flashcards<\/a>.<\/p>\n

So to get an app like this off the ground you go:<\/p>\n

\r\n$ npm i -g create-react-app\r\n$ npm i -g craftool\r\n$ craft intervals https:\/\/github.com\/stoyan\/flashcards\/archive\/master.zip\r\n$ cd intervals\r\n$ npm install .\r\n$ npm start\r\n<\/pre>\n
Tada! Sudden flashcard app, ready to go. All you need to do is implement the functions getAnswer()<\/code> and getQuestion()<\/code><\/a>.<\/p>\n
This is a bit of a specialized app, so no need to go into the gory details of the Questions and Answers. But overall:<\/p>\n
    \n
  1. generate a random first note. e.g. F\u00e2\u2122\u00af on the third octave<\/li>\n
  2. generate a random interval, e.g. a perfect forth<\/li>\n
  3. use teoria<\/a> to give you the correct second note, given a start note and an interval<\/li>\n
  4. draw the two on the staff using Vex<\/a><\/li>\n
  5. play the notes<\/li>\n
  6. random pretty-printing and conversion from my note conventions to teoria to vex<\/li>\n<\/ol>\n
    Weirdness and hacks<\/h2>\n
    danger<\/h3>\n
    Vex wants to draw an SVG inside a DOM element. (AFAIK. There may be better APIs I did not uncover.)<\/p>\n
    So I draw the SVG in a hidden div then copy it over to React, like so:<\/p>\n
    \r\n  <div dangerouslySetInnerHTML={{__html: someSVG.outerHTML}} \/>\r\n<\/pre>\n
    Ooooh, danger!<\/p>\n
    try-catch<\/h3>\n
    Sometimes (rarely!) in all this randomness either teoria<\/code> or vex<\/code> 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<\/a> it hasn't happened. And sometimes you gotta do what you gotta do \ud83d\ude42<\/p>\n
    Playing audio<\/h3>\n
    No WebAudio, just the ole new Audio(url).play()<\/code>. I play the first note, subscribe to its ended<\/code> event, play the second, subscribe to its ended<\/code> and play both. Awesome. Here it goes.<\/a><\/p>\n
    Except iPhone still refuses to play without human intervention, so I just play both together when iPhone is detected.<\/p>\n
    Thanks for reading!<\/h2>\n
    I hope you learned a quick and easy way to create quiz apps<\/a>. And also learned there's a place you can go to practice them intervals<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,7,366,22],"tags":[],"_links":{"self":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1886"}],"collection":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/comments?post=1886"}],"version-history":[{"count":0,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1886\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/media?parent=1886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/categories?post=1886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/tags?post=1886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}