audio-folded-oscilloscope/index.html at master · paulmasri/audio-folded-oscilloscope · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <title>Audio-folded Oscilloscope</title>
    <style>
      body { margin: 1em; font-family: 'Montserrat', sans-serif; }
      h1 { margin: 1em 0; font-size: 18px; }
      p { margin: 1em 0; font-size: 12px; }
      ul.buttons { margin: 1em 0; padding: 0; }
      ul.buttons li { display: inline; margin: 0 1em 0 0; }
      .buttons a.button { padding: 0.5em; background: #006090; color: #fff; font-size: 12px; text-decoration: none; }
      canvas.visualizer { width: 600px; height: 600px; }
     </style>
    <script src="js/app.js"></script>
  </head>
  <body>
  <h1>Audio-folded Oscilloscope</h1>
  <p>Using the Web Audio API for live audio input, the folded-audio oscilloscope plots the waveform on the HTML canvas with the audio value on the x-axis and a time-shifted version on the y-axis. <a href="https://github.com/paulmasri/audio-folded-oscilliscope" target="_blank">See code</a></p>
  <ul class="buttons">
    <li><a class="button" onclick="doStandard()" href="#">Standard</a></li>
    <li><a class="button" onclick="doFolded()" href="#">Folded</a></li>
  </ul>
  <canvas class="visualizer"></canvas>
  </body>
</html>