echo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mic Echo App</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f8f9fa;
    }
    #toggleBtn {
    	font-size:40px;
        text-transform: uppercase;
        width:50%;
        height:20%;
        font-weight:bold;
    }
  </style>
</head>
<body>
  <button id="toggleBtn" class="btn btn-primary btn-lg">Echo</button>

  <script>
    let audioContext;
    let micStream;
    let source;
    let isPlaying = false;

    const button = document.getElementById('toggleBtn');

    button.addEventListener('click', async () => {
      if (!isPlaying) {
        try {
          audioContext = new (window.AudioContext || window.webkitAudioContext)();
          micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
          source = audioContext.createMediaStreamSource(micStream);
          source.connect(audioContext.destination); // Echo to output
          isPlaying = true;
          button.textContent = "Stop";
          button.classList.remove("btn-primary");
          button.classList.add("btn-danger");
        } catch (err) {
          console.error("Error accessing microphone", err);
        }
      } else {
        source.disconnect();
        micStream.getTracks().forEach(track => track.stop());
        audioContext.close();
        isPlaying = false;
        button.textContent = "Echo";
        button.classList.remove("btn-danger");
        button.classList.add("btn-primary");
      }
    });
  </script>
</body>
<footer style="text-align: center; font-size: 0.9em; margin-top: 2em; padding: 1em 0; color: #555;">
  <p>
    <a href="https://tools.itabu.xyz/" style="margin-right: 1em;">Home</a>
    <a href="terms.html" target="_blank" style="margin-right: 1em;">Terms of Service</a>
    <a href="privacy.html" target="_blank">Privacy Policy</a>
  </p>
  <p style="margin-top: 0.5em;">© 2025 i-Tabu Tool</p>
</footer>
</html>