update

index.html

@@ -19,7 +19,7 @@ <h1 class="header__title">Female Voice Conversion</h1>
 
   <main class="main">
     <section class="section">
-      <button id="record-button" class="button button--primary">Record Audio</button>
+      <button id="record-button" class="button button--primary butt">Record Audio</button>
       <div id="recording-indicator" class="recording-indicator">Recording...</div>
       <div id="response-audio" class="response-audio">
         <audio controls id="audio-player" class="audio-player"></audio>
@@ -28,7 +28,7 @@ <h1 class="header__title">Female Voice Conversion</h1>
 
     <section class="section">
       <div id="upload-container" class="upload-container">
-        <label for="upload-input" class="button button--secondary">Upload Audio</label>
+        <label for="upload-input" class="button button--secondary butt">Upload Audio</label>
         <input type="file" id="upload-input" accept="audio/*" class="upload-input">
       </div>
     </section>

main.js

@@ -20,23 +20,24 @@ const responseAudioDiv = document.getElementById('response-audio');
 const uploadInput = document.getElementById('upload-input');
 
 recordButton.addEventListener('click', async () => {
-  if (recordButton.textContent === 'Record Audio') {
-    startRecording();
-    await new Promise(res => setTimeout(res, 10000));
-    stopRecording();
-  } else {
-    stopRecording();
+  if (!recordButton.disabled) {
+    recordButton.disabled = true;
+    recordButton.style.backgroundColor = 'gray';
+    if (recordButton.textContent === 'Record Audio') {
+      startRecording();
+      await new Promise(res => setTimeout(res, 10000));
+      stopRecording();
+    } else {
+      stopRecording();
+    }
+    recordButton.disabled = false;
+    recordButton.style.backgroundColor = '';
   }
 });
 
 function startRecording() {
-  navigator.mediaDevices.enumerateDevices()
-    .then(devices => {
-      const audioDevices = devices.filter(device => device.kind === 'audioinput');
-      const restMicrophones = audioDevices.filter(device => device.label.toLowerCase().includes('bottom') || device.label.toLowerCase().includes('rest'));
-      const constraints = restMicrophones.length > 0 ? { audio: { deviceId: { exact: restMicrophones[0].deviceId } } } : { audio: true };
-
-      return navigator.mediaDevices.getUserMedia(constraints);
+  navigator.mediaDevices.getUserMedia({
+      audio: true
     })
     .then(function(stream) {
       mediaRecorder = new MediaRecorder(stream);
@@ -100,4 +101,4 @@ uploadInput.addEventListener('change', (event) => {
 
 function err() {
   alert("An Error Occured, Check console")
-}
+}

style.css

@@ -60,7 +60,6 @@ body {
 }
 
 .audio-player {
-  width: 100%;
   max-width: 400px;
   margin: 0 auto;
   background: #fff;
@@ -121,10 +120,10 @@ body {
   display: none;
 }
 
-.audio-player {
-  width: 100%;
-}
-
 footer {
   color: #B1B2B6;
+}
+
+.butt {
+  transition: background-color 0.3s ease;
 }