audio

by ananyaneogi

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>createMediaStreamSource example</title>

    <link rel="stylesheet" href="">
    <script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
        <canvas id="canvas" width="512" height="256" ></canvas>

        <p id="controls">
          <input type="button" id="start_button" value="Start">
          &nbsp; &nbsp;
          <input type="button" id="stop_button" value="Stop">
          <p id="msg"></p>
        </p>

        <!-- ----------------------------------------------------- -->

        <style>
            #canvas {
                margin-left: auto;
                margin-right: auto;
                display: block;
                background-color: black;
            }
            #controls {
                text-align: center;
            }
            #start_button, #stop_button {
                font-size: 16pt;
            }
            #msg {
                text-align: center;
            }
        </style>

        <!-- ----------------------------------------------------- -->


        <script type="text/javascript">
            // Hacks to deal with different function names in different browsers
            window.requestAnimFrame = (function(){
              return  window.requestAnimationFrame       ||
                      window.webkitRequestAnimationFrame ||
                      window.mozRequestAnimationFrame    ||
                      function(callback, element){
                        window.setTimeout(callback, 1000 / 60);
                      };
            })();
            window.AudioContext =...