Working Load File to Triple Noise

by pleonardmusic1664

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Audio Synthesizer</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/wav-encoder.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-bar-block .w3-bar-item {padding:20px}

 body {
    	min-height: 100vh;
    	background-color: #000;
    	font-family: 'Roboto',sans-serif;
    	background: linear-gradient(180deg,#62186B 0%,#DB302A 100%) no-repeat;
        color: white;
	}
    .container {
    margin: 0 auto; /* Center the inner container within the outer container */        
      max-width: 800px;
      padding: 20px;
      padding-top: 40px;
      text-align: left;
  background-image: url('https://peteleonard.org/wp-content/uploads/2024/10/IPAD-BACKGROUND.png');
  background-size: contain; /* or 'contain', depending on your needs */
  background-position: center; /* to center the image */
  background-repeat: no-repeat; /* to prevent tiling */      
    }
    
    .inner-container {
    margin: 0 auto; /* Center the inner container within the outer container */    
      min-width: 50%;
      max-width: 400px;
      padding: 20px;
      padding-top: 40px;
      text-align: left;      
    }    
       
    
    /* Style for the buttons */
    button {
      background-color: #ffc0cb; /* Hot pink background */
      color: white; /* Text color */
      font-size: 1.2em; /* Font size */
      padding: 3px 20px; /* Padding for larger area */
      border: none; /* Remove border */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
      margin: 5px; /* Margin between buttons */
      transition: background-color 0.3s; /* Smooth...

JavaScript

// Create a new AudioContext
const audioContext = new AudioContext()

// Canvas variables
const canvas = document.getElementById("waveform-canvas")
const canvasCtx = canvas.getContext("2d")
canvas.width = 800
canvas.height = 200

// Audio variables

let audioData = []
let audioData2 = []
let dataArray = []

// PLOT the waveform on the canvas
function drawWaveform() {
  canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
  canvasCtx.strokeStyle = "blue"
  canvasCtx.lineWidth = 2
  canvasCtx.beginPath()
  const sliceWidth = (canvas.width * 1.0) / audioData.length
  let x = 0
  for (let i = 0; i < audioData.length; i++) {
    const y = ((audioData[i] + 1) * canvas.height) / 2
    if (i === 0) {
      canvasCtx.moveTo(x, y)
    } else {
      canvasCtx.lineTo(x, y)
    }
    x += sliceWidth
  }
  canvasCtx.stroke()
}

////////////// ////////////// //////////////
////////////// BELOW ADDS FILE READER //////////////
const audioContext2 = new AudioContext()

// Create a new AudioBufferSourceNode
let source = null

// Get the file input element
const fileInput = document.getElementById("fileInput")

// Get the play button element
const playButton = document.getElementById("playButton")

// Get the stop button element
const stopButton = document.getElementById("stopButton")

// Load the audio file
function loadAudioFile(file) {
  // Create a new FileReader
  const reader = new FileReader()

  // Event listener for FileReader load
  reader.addEventListener("load", function () {
    // Decode the audio data
    audioContext2.decodeAudioData(reader.result, function (buffer) {
      // Create a new AudioBufferSourceNode
      source = audioContext2.createBufferSource()

      // Set the buffer on the AudioBufferSourceNode
      source.buffer = buffer

      // Connect the AudioBufferSourceNode to the AudioContext destination
      source.connect(audioContext2.destination)

      // Get the audio data as a Float32Array
      /*const*/
      audioData2 =...