Neil Fraser: JS Oscilloscope

Originalartikel

Backup

<html> <head><meta http-equiv=„Content-Type“ content=„text/html; charset=utf-8“/><meta name=„keywords“ content=„Neil Fraser“/><title>Neil Fraser: News: JS Oscilloscope</title></head><body class=„readabilityBody“ readability=„28“> <table readability=„5“><tr readability=„11“><td valign=„top“> <dl class=„desc“ id=„newsLinks“><dt><img src=„https://neil.fraser.name/news/tree-opened.gif“ height=„11“ width=„11“ alt=„-“/>&#160;2018</dt> <dd><img src=„https://neil.fraser.name/news/tree-node.gif“ height=„11“ width=„11“ alt=„“/>&#160;<a href=„https://neil.fraser.name/news/2018/01/25/“ title=„25 January 2018“>JS&#160;Oscilloscope</a></dd> <dd><img src=„https://neil.fraser.name/news/tree-node.gif“ height=„11“ width=„11“ alt=„“/>&#160;<a href=„https://neil.fraser.name/news/2018/01/16/“ title=„16 January 2018“>Wrist&#160;Gears</a></dd> <dt><a href=„https://neil.fraser.name/news/2017/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2017/“>2017</a></dt> <dt><a href=„https://neil.fraser.name/news/2016/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2016/“>2016</a></dt> <dt><a href=„https://neil.fraser.name/news/2015/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2015/“>2015</a></dt> <dt><a href=„https://neil.fraser.name/news/2014/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2014/“>2014</a></dt> <dt><a href=„https://neil.fraser.name/news/2013/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2013/“>2013</a></dt> <dt><a href=„https://neil.fraser.name/news/2012/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2012/“>2012</a></dt> <dt><a href=„https://neil.fraser.name/news/2011/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2011/“>2011</a></dt> <dt><a href=„https://neil.fraser.name/news/2010/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2010/“>2010</a></dt> <dt><a href=„https://neil.fraser.name/news/2009/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2009/“>2009</a></dt> <dt><a href=„https://neil.fraser.name/news/2008/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2008/“>2008</a></dt> <dt><a href=„https://neil.fraser.name/news/2007/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2007/“>2007</a></dt> <dt><a href=„https://neil.fraser.name/news/2006/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2006/“>2006</a></dt> <dt><a href=„https://neil.fraser.name/news/2005/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2005/“>2005</a></dt> <dt><a href=„https://neil.fraser.name/news/2004/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2004/“>2004</a></dt> <dt><a href=„https://neil.fraser.name/news/2003/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2003/“>2003</a></dt> <dt><a href=„https://neil.fraser.name/news/2002/“><img src=„https://neil.fraser.name/news/tree-closed.gif“ height=„11“ width=„11“ alt=„+“ class=„c1“/></a>&#160;<a href=„https://neil.fraser.name/news/2002/“>2002</a></dt> </dl></td> <td valign=„top“ readability=„10“> <div id=„newsContent“ readability=„20“> <h3>JS Oscilloscope</h3> <p><em>25 January 2018</em></p> <p>Plug your computer's audio output into an oscilloscope (right = X, left = Y), then use your mouse to draw in the square below:</p> <p>No oscilloscope? Here's a video.</p> <iframe width=„560“ height=„315“ src=„https://www.youtube.com/embed/JGEsZBPkjNY“ frameborder=„0“ allow=„autoplay; encrypted-media“ allowfullscreen=„“>[embedded content]</iframe> <p>This is all done with about a hundred lines of JavaScript (view source to see it). The mouse's X-Y movements are recorded, then encoded as the right-left channels of a dynamically generated WAV file. This file is URI-encoded and played. Pretty straight-forward.</p> <p>Also fun is this <a href=„https://neil.fraser.name/news/2018/clock.html“>analog clock</a> that displays the current time on your oscilloscope.</p> <p>If you liked these, do checkout <a href=„https://www.youtube.com/watch?v=s1eNjUgaB-g“>Youscope</a>, and try playing its <a href=„https://neil.fraser.name/news/2018/youscope.wav“>source audio file</a> on your oscilloscope.</p> <p>&lt; <a href=„https://neil.fraser.name/news/2018/01/16/“ title=„16 January 2018“>Previous</a> | Next &gt;</p> </div> </td> </tr></table> <div><img class=„c3“ src=„https://neil.fraser.name/lineblue.jpg“ width=„540“ height=„4“ alt=„————————————-“/></div> <p>Legal yada yada: My views do not necessarily represent those of my employer or my goldfish.</p> <p><a href=„https://neil.fraser.name/“>Neil Fraser</a>: <a href=„https://neil.fraser.name/news/“>News</a>: JS Oscilloscope</p> </body> </html>