Create playground page

[ianprime0509]

There's an example already, but it might be nice to publish a sort of "playground" page to GitHub Pages using the current code on main to allow people to experiment with different configurations. This would be something more focused on this library in isolation (allowing users to tweak lower-level configuration parameters), whereas Temperatune serves as an example of its use in a larger, user-facing application.

[meherhowji]

I think this would be a great idea. Looking at Temperatune, I noticed how smooth the detection was, it got me curious as to what configurations you changed in the app.
Instant pitch feedback is good for from usability point-of-view a throttled/averaged detection for a duration.

[ianprime0509]

Thanks for the feedback! Yes, having a page like this would definitely aid in finding good parameters for different types of input, especially since my own usage is rather limited (string instrument tuning). Perhaps the "pitch over time" visualization I mentioned in #63 would be a good thing to include on this page as well, when I get a chance to try making it.

For what it's worth, Temperatune doesn't really do anything fundamentally different from the examples in this repository, except that the update rate is slightly different (150ms for Temperatune, 100ms for this repository's examples): https://github.com/ianprime0509/temperatune/blob/1434e7450707ea710f6f24a3b1a1c7c76d59494a/src/pitch-analyser.ts#L31-L38 Having quick feedback is definitely useful, but I do suspect that I could get better results in some cases (e.g. vibrato) by taking averages, as I suggested in #63. A playground page might be useful in determining the best way to do this: for example, if I could take a sample every 25ms and then average 6 such samples, it would result in the same refresh rate but potentially be more reliable when vibrato is involved.

[github-actions]

🎉 This issue has been resolved in version 4.0.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[meherhowji]

Congrats on the release of playground! Really neat feature. 🎉🚀

Just thinking out loud, do you think it would be a great addition to have a Storybook feature where we can put multiple configurations under a label based on their usage or applicability or some other factor?

[ianprime0509]

That's an interesting idea; I'm not sure I know which configurations exactly would be most appropriate for each situation, though, since the app where I'm currently using this library just uses defaults and seems to work fine for what I currently use it for (viola tuning). If I find that there are better configurations for a particular use-case (e.g. voice), then that would definitely be a good thing to have on the playground page.

[meherhowji]

Yes I guess it would be a nice to have a configuration based on instruments. By the way, how did you figure out the default configuration?

[ianprime0509]

The only default that's really set in this library itself is the clarity threshold for the pitch detector, which actually isn't configurable right now anyways; the value of 0.9 was chosen because the paper the algorithm came from suggested a value in the range of 0.8 to 1.0, so I just chose 0.9 as being in the middle of that.

Aside from that, most of the defaults in the examples come from browser, such as the buffer size being the default fftSize of the AnalyserNode. The rate at which the pitch is updated just comes from whatever I find to be a decent balance between feeling responsive and updating so quickly as to become annoying or unnecessarily resource-intensive. There's also the default threshold in Temperatune for how clear the pitch needs to be to display it (currently 0.9), which was also fairly arbitrary and could probably be improved upon.

The playground page was mostly created as a way to see whether doing something different (e.g. overriding the browser default for fftSize) would help at all with the algorithm. I suspect a future enhancement will be to make the