Coder Social home page Coder Social logo

sean-bradley / oscilloscope Goto Github PK

View Code? Open in Web Editor NEW
36.0 4.0 6.0 87 KB

HTML5 X Y Oscilloscope

Home Page: https://sean-bradley.github.io/Oscilloscope/

License: MIT License

HTML 100.00%
html5 canvas fft oscilloscope vectorscope audio getusermedia

oscilloscope's Introduction

X Y Oscilloscope

Demo : https://sean-bradley.github.io/Oscilloscope/

X Y Waveform Spectrum

Accepts live input from 'microphone' or 'stereo mix' sources.

This has 3 modes,

  • X Y
  • Waveform
  • Frequency Spectrum

In X Y mode, left input channel affects X axis and right input channel affects Y axis.

The X Y Mode requires Stereo Input to draw pictures properly, otherwise it draws just a diagonal line since left and right are identical.

You will need to allow your browser to access your microphone when alerted.

Playing a sine wave in left channel and cosine wave in right channel draws a circle.

Works best on Windows 10 and Microsoft Edge Browser.

I can't get Chrome to split left and right channels properly at the moment, and firefox seems to have some AGC i can't override. You may not have these issues with your setup.

On windows,

  • Open 'Privacy' Settings from the Cortana input near the windows start button.
  • Allow Microsoft Edge to access Microphone
  • Open 'Sound' settings from the Cortana input box input near the windows start button.
  • Manage 'Recording' devices to select desired audio input, stero input preferred.
  • Refresh Oscilloscope Page in Edge Browser, Press 'START' button and allow website to access your microphone.
  • Make some noise

You can watch this video to see the same patterns that are drawn on the X Y view, as are drawn in the video. The images are transferred between your application windows using audible sound waves. And can even work across air gapped devices.

Search for lissagous sound videos to see other examples. Disclaimer, this software isn't as good as a real hardware XY Oscilloscope, but it's a good temporary replacement for the time being.

To get stereo input in windows its best to use the 'Stereo Mix' option set as default device in the recording device sound options and make sure it's level is set to 100 for best results.

If 'Stereo Mix' option is not visible, right click in devices area and tick 'Show Disabled Devices' and 'Show Disconnected Devices'

If 'Stereo Mix' is still not visible, you may need to update the RealTek High Definition Audio drivers from the RealTek website.

If all settings are correct then playing synth music from your desktop will produce patterns in the display.

Written by seanwasere ytbe

https://www.youtube.com/seanwasere

Example of using the Oscillioscope to draw pictures with sound

Draw pictures with sound

oscilloscope's People

Contributors

sean-bradley avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

oscilloscope's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.