<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Voice Recording Form</title>
</head>
<body>
  <form id="recordingForm" enctype="multipart/form-data">
    <textarea id="textarea" name="text" rows="4" cols="50"></textarea>
    <br>
    <input type="file" accept="audio/*" name="audio" id="audioFile">
    <br>
    <button type="button" onclick="startRecording()">Start Recording</button>
    <button type="button" onclick="stopRecording()">Stop Recording</button>
    <button type="submit">Submit</button>
  </form>

  <script>
    // JavaScript code for recording and saving functionality
    // ...

    // Handle form submission
    document.getElementById('recordingForm').addEventListener('submit', function(event) {
      event.preventDefault();

      // Stop recording if it's in progress
      if (isRecording) {
        stopRecording();
      }

      // Get the form element
      const form = event.target;

      // Create a FormData object to store the form data
      const formData = new FormData(form);

      // Send the form data to the server using fetch API or XMLHttpRequest
      fetch('upload.php', {
        method: 'POST',
        body: formData
      })
        .then(function(response) {
          // Handle the server response
          console.log('Data uploaded successfully');
        })
        .catch(function(error) {
          console.error('Error uploading data: ', error);
        });
    });
  </script>
</body>
</html>
