![]() You can read the other post if you want the super gory details, but the quick version here is that I'm loading all three of my web components individually, and as each one arrives it upgrades the element it manages. The whole thing weighs in at 40.1KB including Polymer (but excluding the 12KB Web Components polyfills), so if it had been slow to load I think I'd have found that more than a little depressing. In fact, on WebPageTest the Speed Index for a cable connection is ~450, and on 3G it's ~2800, which I'm very happy about. Guitar Tuner uses that exact approach (because I figured it out while I was building the app), and that means I have the Web Components goodies, but the app should be super fast to load. I recently wrote a post about how you can lazy-load and progressively enhance your pages with Polymer. Edge will support getUserMedia, though, so that's good news!Īlright, caveats out of the way, let's talk details! Polymer # If the browser can't listen, it can't help me tune a guitar. This is because they don't support getUserMedia, and I can't do much to work around it. Mobile Safari isn't supported, nor is Internet Explorer.It's probably going to be (well, it will be) less accurate than a chromatic tuner that uses the vibrations on the guitar's neck to provide frequency information. The tuning is done through the device's microphone.You can always submit a patch if you would like to. If nothing else I don't have a 12-string to hand, and generally they're way less common, and I'm nothing if not a majority panderer when it comes to tuners. I have assumed a standard-tuned, 6-string guitar.Nothing quite like couching a thing you've built in a load of just-in-case-it-doesn't-work caveats. Unfortunately it does involve seeing me play the guitar, for which I can only apologise, but hopefully I at least get points for trying. If you're not a guitarist, or you don't have a guitar to hand, you can always check out the video below where I show it in use. You can get the code and have a look around! But I also used them with the Polymer / Web Componenty bits this time around, which was fun. I'm not going back to ES5 unless you drag me, so they're in here, too. I gave these a run out recently, and I got hooked. ES6 classes, fat arrow functions, and Promises. ![]() On the off-chance someone wants to add the app to their homescreen, it seems like it would be good to provide a nice icon, short name, and set up some preferences for how the app should behave. Plus offline support is the sport of winners. Sure, why not? It's effectively a single page app, and that means adding on Service Worker support should be super simple. In this case I had the idea that I could have three components: one to handle the audio input and analysis one for the dial and one for the instructions (tune up, down, etc). ![]() It's the perfect time to give Web Components a run out. I'm sure you, like me, are shocked at this revelation. ![]() Guitar Tuner, despite its cryptic name, is a web app that helps you tune a guitar. See Guitar Tuner Overview and Highlights # ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |