<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Voice Changer</title>
<link rel="stylesheet" href="style.css" />

</head>
<body>
<main class="vc-app">
  <h1>Voice Changer</h1>
  <div class="controls">
    <button id="recordBtn">🎤 Start Recording</button>
  </div>
  <p id="status" class="status">Ready</p>
  <div class="effects">
    <label>Pitch: <input id="pitch" type="range" min="0.5" max="2" step="0.05" value="1"><span id="pitchVal">1.00</span></label>
    <label>Rate: <input id="rate" type="range" min="0.5" max="2" step="0.05" value="1"><span id="rateVal">1.00</span></label>
  </div>
  <audio id="audio" controls></audio>
  <button id="playBtn" disabled>▶ Play with Effect</button>
</main>
<script src="script.js"></script>
</body>
</html>