https://github.com/sean-bradley/oscilloscope

HTML5 X Y Oscilloscope
https://github.com/sean-bradley/oscilloscope

audio canvas fft getusermedia html5 oscilloscope vectorscope

Last synced: 15 days ago
JSON representation

HTML5 X Y Oscilloscope

• Host: GitHub
• URL: https://github.com/sean-bradley/oscilloscope
• Owner: Sean-Bradley
• License: mit
• Created: 2017-11-12T10:17:23.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-28T11:48:47.000Z (over 5 years ago)
• Last Synced: 2024-11-13T13:54:56.925Z (3 months ago)
• Topics: audio, canvas, fft, getusermedia, html5, oscilloscope, vectorscope
• Language: HTML
• Homepage: https://sean-bradley.github.io/Oscilloscope/
• Size: 85 KB
• Stars: 37
• Watchers: 5
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
## X Y Oscilloscope

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

![X Y](1.jpg)

![Waveform](3.jpg)

![Spectrum](4.jpg)

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](https://www.youtube.com/watch?v=JrOP-RJ5p1I) 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](https://www.youtube.com/watch?v=JrOP-RJ5p1I)

[![Draw pictures with sound](0.jpg)](https://www.youtube.com/watch?v=JrOP-RJ5p1I)