dezashibi/audio_uploader.html

## audio_uploader.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Record and Upload Audio</title>
</head>
<body>
<h2>Record and Upload Audio</h2>
<button id="startBtn">Start Recording</button>
<button id="stopBtn" disabled>Stop Recording</button>
<h3>Recorded Audio:</h3>
<audio id="audioPlayback" controls></audio>

<script>
  let mediaRecorder;
  let audioChunks = [];

  document.getElementById('startBtn').addEventListener('click', startRecording);
  document.getElementById('stopBtn').addEventListener('click', stopRecording);

  async function startRecording() {
    document.getElementById('startBtn').disabled = true;
    document.getElementById('stopBtn').disabled = false;
    audioChunks = [];

    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.ondataavailable = (event) => {
        audioChunks.push(event.data);
      };
      mediaRecorder.start();
    } catch (err) {
      console.error('An error occurred: ', err);
    }
  }

  function stopRecording() {
    document.getElementById('startBtn').disabled = false;
    document.getElementById('stopBtn').disabled = true;

    mediaRecorder.stop();
    mediaRecorder.onstop = async () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
      const audioUrl = URL.createObjectURL(audioBlob);
      document.getElementById('audioPlayback').src = audioUrl;

      // Upload audio
      const formData = new FormData();
      formData.append('file', audioBlob, 'recording.mp3');
      await uploadAudio(formData);
    };
  }

  async function uploadAudio(formData) {
    try {
      const response = await fetch('https://api.escuelajs.co/api/v1/files/upload', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        console.log('Audio uploaded successfully');
        console.log(await response.json());
      } else {
        console.error('Upload failed');
      }
    } catch (err) {
      console.error('Error uploading file: ', err);
    }
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Record and Upload Audio</title>
	</head>
	<body>
	<h2>Record and Upload Audio</h2>
	<button id="startBtn">Start Recording</button>
	<button id="stopBtn" disabled>Stop Recording</button>
	<h3>Recorded Audio:</h3>
	<audio id="audioPlayback" controls></audio>

	<script>
	let mediaRecorder;
	let audioChunks = [];

	document.getElementById('startBtn').addEventListener('click', startRecording);
	document.getElementById('stopBtn').addEventListener('click', stopRecording);

	async function startRecording() {
	document.getElementById('startBtn').disabled = true;
	document.getElementById('stopBtn').disabled = false;
	audioChunks = [];

	try {
	const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
	mediaRecorder = new MediaRecorder(stream);
	mediaRecorder.ondataavailable = (event) => {
	audioChunks.push(event.data);
	};
	mediaRecorder.start();
	} catch (err) {
	console.error('An error occurred: ', err);
	}
	}

	function stopRecording() {
	document.getElementById('startBtn').disabled = false;
	document.getElementById('stopBtn').disabled = true;

	mediaRecorder.stop();
	mediaRecorder.onstop = async () => {
	const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
	const audioUrl = URL.createObjectURL(audioBlob);
	document.getElementById('audioPlayback').src = audioUrl;

	// Upload audio
	const formData = new FormData();
	formData.append('file', audioBlob, 'recording.mp3');
	await uploadAudio(formData);
	};
	}

	async function uploadAudio(formData) {
	try {
	const response = await fetch('https://api.escuelajs.co/api/v1/files/upload', {
	method: 'POST',
	body: formData,
	});

	if (response.ok) {
	console.log('Audio uploaded successfully');
	console.log(await response.json());
	} else {
	console.error('Upload failed');
	}
	} catch (err) {
	console.error('Error uploading file: ', err);
	}
	}
	</script>
	</body>
	</html>