Baconics RSS Feedhttps://baconics.com/feedBaconics Newsen-usPHP SimpleXMLhttps://baconics.com/feedThu, 18 Jan 2018 17:33:41 +0000Audio Viusualization With the Web Audio APIhttps://baconics.com/blog/2016/04/audio-visualization-with-the-web-audio-apiRecently I have been doing some fiddling around with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" target="_blank">Web Audio API</a> for the audio player on <a href="http://img.baconics.com" target="_blank">img.baconics.com</a> and I have to say, one can do some pretty cool things with it; one of those things being audio visualization with a little help from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank">Canvas API</a>.<br /> <br /> <span style="font-size: 20px;">The HTML</span><br /> <span class="hr"></span><br /> The HTML is pretty straighforward, all we really need is the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio" target="_blank">&lt;audio&gt;</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" target="_blank">&lt;canvas&gt;</a> elements.<br /> <pre class="codeblock"><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script type=&quot;application/javascript&quot;&gt; &lt;!-- THE JAVASCRIPT WILL GO HERE //--&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;audio id=&quot;media&quot; controls &gt; &lt;source src=&quot;audio.mp3&quot; type=&quot;audio/mpeg&quot; /&gt; Your browser does not support HTML audio. &lt;/audio&gt; &lt;canvas id=&quot;visualizer&quot; width=&quot;400&quot; height=&quot;200&quot; /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre><br /> <span style="font-size: 20px;">The JavaScript</span><br /> <span class="hr"></span><br /> First we need to create the <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext" target="_blank">audio context</a>, connect an <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode" target="_blank">analyser node</a> and get our source media. For the sake of simplicity we will just be using a... <a class="show-more" href="/blog/2016/04/audio-visualization-with-the-web-audio-api">(Show More)</a>Sat, 16 Apr 2016 08:15:57 +0000Spin.moehttps://baconics.com/blog/2016/01/spin-moeRecently I've been working on a little side project, <a href="http://spin.moe" target="_blank">Spin.moe</a>.<br /> <br /> <a href="http://spin.moe" target="_blank">Spin.moe</a> an anime roulette wheel of sorts, it randomly picks an anime from your animelist (with various specified paramaters), I find it very useful since I have a lot of anime on my plan to watch and often can't decide what to watch.<br /> <br /> Currently <a href="http://spin.moe" target="_blank">Spin.moe</a> works for <a href="http://myanimelist.net" target="_blank">MyAnimeList</a>, <a href="//hummingbird.me" target="_blank">Hummingbird</a> and <a href="//anilist.co" target="_blank">AniList</a>. Check it out if you are into anime and need to figure out what to watch.Sun, 10 Jan 2016 15:22:05 +0000JavaScript as the Experiencehttps://baconics.com/blog/2015/07/javascript-experienceMost sites nowadays use JavaScript, and if you want to offer a fluid user experience it is usually one of the best choices.<br /> <br /> However I've noticed that a disturbing amount of websites become practically useless if you disable JavaScript, this is (in my opinion) terrible practice, and terrible design.<br /> <br /> <span style="font-size: 20px;">Why does this matter?</span><br /> <span class="hr"></span>Most people who will access a webpage will have JavaScript enabled, it is pretty standard these days, However that doesn't mean everyone has JavaScript enabled and you shouldn't overlook these users who are unable to run scripts or just don't want to.<br /> <br /> Some other reasons as to why this matters:<br /> <br /> <ul style="margin-left: 2em;"><li><strong>The website is a lot more dependent on the client:</strong> <br /> Everyone has different Operating systems, different browsers and people update these things at different rates. This increases the chance of failure substantially and this can cause issues if a website relies on a newer JavaScript feature and the user's browser doesn't support it, the website is now useless to the u</li></ul>... <a class="show-more" href="/blog/2015/07/javascript-experience">(Show More)</a>Sat, 11 Jul 2015 14:43:58 +0000