# The Official Reverberation!
**Made by Yeoh Tian Huai**

This will probably be the last commit before I can properly make more changes so I will add the code here:
Main.js file
```
import "./style.css";


  var frequencyFetcher = document.getElementById("frequency");
  var frequencyDisplay = document.getElementById("frequencyDisplay");
  var amplitudeFetcher = document.getElementById("amplitude");
  var amplitudeDisplay = document.getElementById("amplitudeDisplay");
  var hideGraph = document.getElementById("hideGraph");
  var showGraph = document.getElementById("showGraph");

  showGraph.classList.add("hidden");

  hideGraph.addEventListener("click", function(){
    hideGraph.classList.add("hidden");
    amplitudeFetcher.classList.add("hidden");
    frequencyFetcher.classList.add("hidden");
    canvas.classList.add("hidden");
    showGraph.classList.remove("hidden");
    window.setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
    }, 10);
  });

  showGraph.addEventListener("click", function(){
    showGraph.classList.add("hidden");
    amplitudeFetcher.classList.remove("hidden");
    frequencyFetcher.classList.remove("hidden");
    canvas.classList.remove("hidden");
    hideGraph.classList.remove("hidden");
    window.setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
    }, 10);
  });

  const canvas = document.getElementById("graph");
  const ctx = canvas.getContext("2d");

  frequencyDisplay.innerHTML = frequencyFetcher.value;
  var frequency = frequencyFetcher.value;
  var amplitude = amplitudeFetcher.value/100;
  var audioContext = null;
  var source = null;
  var isSource = false;

  frequencyFetcher.oninput = function() {
    frequencyDisplay.value = this.value;
    frequency = this.value;
    redrawCanvas();
    if(isSource === true){
      playSound();
        }
  };
  frequencyDisplay.oninput = function(){
    frequencyFetcher.value = this.value;
    frequency = this.value;
    redrawCanvas();
    if(isSource === true){
      playSound();
        }
  };

  amplitudeDisplay.innerHTML = amplitudeFetcher.value;

  amplitudeDisplay.oninput = function(){
    amplitudeFetcher.value = this.value;
    amplitude = this.value/100;
    redrawCanvas();
    if(isSource === true){
      playSound();
        }
  };

  amplitudeFetcher.oninput = function() {
    amplitudeDisplay.value = this.value;
    amplitude = this.value/100;
    redrawCanvas();
    if(isSource === true){
      playSound();
        }
  };

  function redrawCanvas() {
    var duration = 0.02;
    var sr = 44100;

    const wave = sine_wave(amplitude, frequency, duration, sr);

    canvas.width = window.innerWidth;
    canvas.height = 200;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    for (let i = 0; i < wave.length; i++) {
      const x = (canvas.width * i) / wave.length;
      const y = (canvas.height / 2) - wave[i] * (canvas.height / 2);
      ctx.lineTo(x, y);
    }
    ctx.strokeStyle = "#EEEEEE";
    ctx.lineWidth = 5;
    ctx.stroke();
  }

  function sine_wave(amplitude, frequency, duration, sr) {
    const samples = duration * sr;
    const wave = [];
    for (let i = 0; i < samples; i++) {
      const sample = amplitude * Math.sin((2 * Math.PI * frequency * i) / sr);
      wave.push(sample);
    }
    return wave;
  }

  function playSound() {
    if (!audioContext) {
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
  
    if (source) {
      source.stop();
      source.disconnect();
    }
    var duration = 100;
    var sr = 44100;
    var samples = duration * sr;
    var wave = sine_wave(amplitude, frequency, duration, sr);
    var buffer = audioContext.createBuffer(1, samples, sr);
    var data = buffer.getChannelData(0);
    for (let i = 0; i < samples; i++) {
      data[i] = wave[i];
    }
    source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
    isSource = true;
  }

  function stopSound() {
    if (source) {
      source.stop();
      source.disconnect();
      source = null;
      isSource = false;
    }
    
  }
  document.getElementById('playButton').addEventListener('click', playSound);
  document.getElementById('stopButton').addEventListener('click', stopSound);
  redrawCanvas();
```

Style.css
```
body{
  background-color: var(--backGround);
}
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

:root{
  --backGround: #222831;
}

h1{
  font-family: avenir;
  font-size: 4lvw;
  color: #00ADB5;
}
p{
  color: #00ADB5;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #393E46;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00ADB5;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00ADB5;
  cursor: pointer;
}

.numberOption{
  display: inline-block;
    width: 8lvw;
    padding: 2lvw;
    border: 0.5lvw solid #393E46;
    background-color: #222831;
    color: #00ADB5;
    border-radius: 1lvw;
    text-align: center;
    font-size: 4lvw;
}

.soundButtons{
  font-size: 15lvw;
  background-color: var(--backGround); 
  border: none;
}

.visibleButtons{
  font-size: 7lvw;
  background-color: var(--backGround); 
  border: none;
  color: #EEEEEE;
}

#feedbackForm{
  font-size: 5lvw;
  text-align: center;
}

.inputFormFields{
  font-size: 4lvw;
  background-color: #393E46;
  color: #00ADB5;
  text-align: center;
  margin: 1vw;
}

.hidden {
  height: 0;
  width: 0;
  overflow: hidden;
}

#graph{
  width: 100%;
}

#graph2{
  width: 100%;
}

```
Index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image" href="./TeamReverberation!.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/7b985f1e3c.js" crossorigin="anonymous"></script>
    <script
		src="https://code.jquery.com/jquery-3.4.1.js"
		integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
		crossorigin="anonymous"></script>
	<script>
		function SubForm (){
			$.ajax({
				url:"https://api.apispreadsheets.com/data/05RDbZcEkL9w9pEX/",
				type:"post",
				data:$("#feedbackForm").serializeArray(),
				success: function(){
					alert("Form Data Submitted :) Have a nice day! - Yeoh TH")
				},
				error: function(){
					alert("There was an error :( Come to one of us to figure out what is the problem - Yeoh TH")
				}
			});
		}
	</script>
    <title>Reverberation</title>
    <meta name="description" content="Developed by Yeoh Tian Huai Teammates: Nathan Quek and Rishav Ganguly!"/>
    <meta name="author" content="Yeoh Tian Huai"/>
<<<<<<< HEAD
=======
    <script type="module" crossorigin src="/reverberation-soundDemo/assets/index-eed431a1.js"></script>
    <link rel="stylesheet" href="/reverberation-soundDemo/assets/index-f175a7dd.css">
>>>>>>> origin/main
  </head>
  <body>


    <div id="app"></div>
    <div class="App">
      
      <div id="header">
      <h1 style="font-size: 10lvw;">Binaural Beats</h1>
      <h2 style="color:#00ADB5; font-family: avenir; font-size: 6lvw;">By <abbr title="Yeoh Tian Huai, Nathan Quek and Rishav Ganguly">Team Reverberation<abbr></h2>
      </div>
      

      <!-- <script>
        var headerHider = document.getElementById("hideHeader");
        var headerShower = document.getElementById("showHeader");
        var headerContent = document.getElementById("header");

        headerShower.style.visibility = "hidden";

        headerHider.addEventListener("click", function() {
          headerContent.style.visibility = "hidden";
          headerShower.style.visibility = "visible";
          window.dispatchEvent(new Event('resize'));
        });

        headerShower.addEventListener("click", function() {
          headerContent.style.visibility = "visible";
          headerShower.style.visibility = "hidden";
          window.dispatchEvent(new Event('resize'));
        });
      </script> -->

      <button id="hideGraph" class="visibleButtons"><i class='fas fa-eye-slash'></i></button>
      <button id="showGraph" class="visibleButtons"><i class='fas fa-eye'></i></button>
      
      <canvas id="graph"></canvas>
      <h1>
        Frequency: <span><input id="frequencyDisplay" class="numberOption" type="number" min="110" max="880" step="1" value="440"></span> hertz
      </h1>
      <input
        id="frequency"
        class="slider"
        type="range"
        min="110"
        max="880"
        value="440"
        step="1"
      />
      <h1>
        Amplitude: <input id="amplitudeDisplay" class="numberOption" type="number" min="0" max="100" step="1" value="50"> %
      </h1>
      <input
        id="amplitude"
        class="slider"
        type="range"
        min="0"
        max="100"
        value="50"
        step="1"
      />

      <button id="playButton" class="soundButtons"><i class='fas fa-play-circle' style="color: #00ADB5;"></i></button>
      <button id="stopButton" class="soundButtons"><i class='fas fa-pause-circle' style="color: #EEEEEE;"></i></button>
      <br>
      <button id="hideGraph2" class="visibleButtons"><i class='fas fa-eye-slash'></i></button>
      <button id="showGraph2" class="visibleButtons"><i class='fas fa-eye'></i></button>
      <canvas id="graph2"></canvas>
      <h1>
        Frequency<sub>2</sub>: <input id="frequencyDisplay2" class="numberOption" type="number" min="110" max="880" step="1" value="444"> hertz
      </h1>
      <input
        id="frequency2"
        class="slider"
        type="range"
        min="110"
        max="880"
        value="444"
        step="1"
      />
      <h1>
        Amplitude<sub>2</sub>: <input id="amplitudeDisplay2" class="numberOption" type="number" min="0" max="100" step="1" value="50"> %
      </h1>
      <input
        id="amplitude2"
        class="slider"
        type="range"
        min="0"
        max="100"
        value="50"
        step="1"
      />
      <!--use step="0.01" in range sliders next time!!!-->
      <button id="playButton2" class="soundButtons"><i class='fas fa-play-circle' style="color: #00ADB5;"></i></button>
      <button id="stopButton2" class="soundButtons"><i class='fas fa-pause-circle' style="color: #EEEEEE;"></i></button>

      <h1 style="font-size: 5lvw;">Try the metronome!</h1>


      <h1>Beats Per Second (BPS): <input id="bpsInput" class="numberOption" type="number" min="1" max="12" step="1" value="2">
      </h1> 
      <button id="playButton3" class="soundButtons"><i class='fas fa-play-circle' style="color: #00ADB5;"></i></button>
      <button id="stopButton3" class="soundButtons"><i class='fas fa-pause-circle' style="color: #EEEEEE;"></i></button>
      
      <h1 style="font-size: 5lvw;">Both sine waves together now!</h1>
      
      <p style="font-family: avenir; font-size: 3lvw;">Try and hear the beating effect if you play any 2 waves with a difference in frequency of less then or equal to 6, like for example, 440 and 444, together!</p>
      <p style="font-family: avenir; font-size: 3lvw;">What is the metronome for? <br> Hint: 444 - 440 = 4</p>
    </div>
    
<<<<<<< HEAD
    <script type="module" src="/main.js"></script>
    <script type="module" src="/wave02.js"></script>
    <script type="module" src="/graphBoth.js"></script>
=======
    
    
    
>>>>>>> origin/main
  </body>
  <section>
    <p style="font-family: avenir;font-size: 4lvw;">Developer: Yeoh TH (Tian Huai)<br>
      <img style="height: 30lvw; width: 30lvw;" src="./THDeveloperLogomark1.png"></img>
      <form id="feedbackForm">
        <label style="color: #00ADB5;" id="feedbackForm" >Provide us feedback!</label><br></br>
        <input class="inputFormFields" name="Name" type="text" placeholder="Name" autocomplete="given-name">
        <br>
        <input class="inputFormFields" name="Email" type="email" placeholder="Email Address" autocomplete="email" >
        <br>
        <textarea class="inputFormFields" name="Feedback" rows="5" cols="25" placeholder="Provide feedback for our sound demonstration! - Yeoh TH" required></textarea> 
        <br>
        <button class="inputFormFields" onclick='SubForm()'>Submit <i class="	fas fa-arrow-alt-circle-up"></i></button>
      </form>
      <br>
      <a href="mailto:yeoh_tian_huai@s2022.ssts.edu.sg" target="_blank">
        <button style="background-color: var(--backGround);border: none;font-size: 8vw;color: #00ADB5;"><i class="far fa-envelope"></i></button>
      </a>
    </p>
  </section>
</html>
```

wave02.js
```
import "./style.css";


var frequencyFetcher = document.getElementById("frequency2");
var frequencyDisplay = document.getElementById("frequencyDisplay2");
var amplitudeFetcher = document.getElementById("amplitude2");
var amplitudeDisplay = document.getElementById("amplitudeDisplay2");
var hideGraph = document.getElementById("hideGraph2");
  var showGraph = document.getElementById("showGraph2");

  showGraph.classList.add("hidden");

  hideGraph.addEventListener("click", function(){
    hideGraph.classList.add("hidden");
    amplitudeFetcher.classList.add("hidden");
    frequencyFetcher.classList.add("hidden");
    canvas.classList.add("hidden");
    showGraph.classList.remove("hidden");
    window.setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
    }, 10);
  });

  showGraph.addEventListener("click", function(){
    showGraph.classList.add("hidden");
    amplitudeFetcher.classList.remove("hidden");
    frequencyFetcher.classList.remove("hidden");
    canvas.classList.remove("hidden");
    hideGraph.classList.remove("hidden");
    window.setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
    }, 10);
  });

const canvas = document.getElementById("graph2");
const ctx = canvas.getContext("2d");

frequencyDisplay.innerHTML = frequencyFetcher.value;
var frequency = frequencyFetcher.value;
var amplitude = amplitudeFetcher.value/100;
var audioContext;
var source = null;
var isSource = false;

frequencyFetcher.oninput = function() {
  frequencyDisplay.value = this.value;
  frequency = this.value;
  redrawCanvas();
  if(isSource === true){
    playSound();
      }
};
frequencyDisplay.oninput = function(){
  frequencyFetcher.value = this.value;
  frequency = this.value;
  redrawCanvas();
  if(isSource === true){
    playSound();
      }
};

amplitudeDisplay.innerHTML = amplitudeFetcher.value;

amplitudeDisplay.oninput = function(){
  amplitudeFetcher.value = this.value;
  amplitude = this.value/100;
  redrawCanvas();
  if(isSource === true){
    playSound();
      }
};

amplitudeFetcher.oninput = function() {
  amplitudeDisplay.value = this.value;
  amplitude = this.value/100;
  redrawCanvas();
  if(isSource === true){
  playSound();
    }
};

function redrawCanvas() {
  var duration = 0.02;
  var sr = 44100;

  const wave = sine_wave(amplitude, frequency, duration, sr);

  canvas.width = window.innerWidth;
  canvas.height = 200;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  for (let i = 0; i < wave.length; i++) {
    const x = (canvas.width * i) / wave.length;
    const y = (canvas.height / 2) - wave[i] * (canvas.height / 2);
    ctx.lineTo(x, y);
  }
  ctx.strokeStyle = "#EEEEEE";
  ctx.lineWidth = 5;
  ctx.stroke();
}

function sine_wave(amplitude, frequency, duration, sr) {
  const samples = duration * sr;
  const wave = [];
  for (let i = 0; i < samples; i++) {
    const sample = amplitude * Math.sin((2 * Math.PI * frequency * i) / sr);
    wave.push(sample);
  }
  return wave;
}

function playSound() {
    if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
      }
    
    if (source) {
        source.stop();
        source.disconnect();
      }
  var duration = 100;
  var sr = 44100;
  var samples = duration * sr;
  var wave = sine_wave(amplitude, frequency, duration, sr);
  var buffer = audioContext.createBuffer(1, samples, sr);
  var data = buffer.getChannelData(0);
  for (let i = 0; i < samples; i++) {
    data[i] = wave[i];
  }
  source = audioContext.createBufferSource();
  source.buffer = buffer;
  source.connect(audioContext.destination);
  source.start();
  isSource = true;
}

function stopSound() {
  if (source) {
    source.stop();
    source.disconnect();
    source = null;
    isSource = false;
  }
}
document.getElementById('playButton2').addEventListener('click', playSound);
document.getElementById('stopButton2').addEventListener('click', stopSound);
redrawCanvas();

```

Second graphBoth.js
```
import './style.css';

var audioContext = new AudioContext();
var playButton = document.getElementById("playButton3");
var stopButton = document.getElementById("stopButton3");
var audioBuffer;
var source;
var intervalId; 

function loadSound(url) {
  return fetch(url)
    .then(response => response.arrayBuffer())
    .then(buffer => audioContext.decodeAudioData(buffer))
    .then(decodedData => {
      audioBuffer = decodedData;
    });
}

function playSound() {
  if (!audioBuffer) {
    return;
  }

  var bps = document.getElementById("bpsInput").value;
  var interval = 1 / bps * 1000;

  
  stopSound();

  source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  intervalId = setInterval(function() {
    source.stop();
    source.disconnect();

    source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioContext.destination);
    source.start();
  }, interval);
}

function stopSound() {
  if (source) {
    clearInterval(intervalId);
    source.stop();
    source.disconnect();
  }
}

loadSound("./metronomeWood.wav")
  .then(function() {
    console.log("Sound file loaded successfully.");
  })
  .catch(function(error) {
    console.log("Error loading sound file:", error);
  });

playButton.addEventListener("click", playSound);
stopButton.addEventListener("click", stopSound);
```

MIT License

Copyright (c) 2025 YeohTH

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

### thats all folks!