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

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

The Official Reverberation!

thats all folks!

About

Uh oh!

Releases

Packages

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 33 Commits
assets		assets
LICENSE		LICENSE
README.md		README.md
THDeveloperLogomark1.png		THDeveloperLogomark1.png
TeamReverberation!.png		TeamReverberation!.png
index.html		index.html
metronomeWood.wav		metronomeWood.wav

License

Yeoh-TH/reverberation-soundDemo

Folders and files

Latest commit

History

Repository files navigation

The Official Reverberation!

thats all folks!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages