JavaScriptを使ってWebブラウザ上で録音する無料のツールを作る方法（wav、mp3、flac対応）

// マイクの権限取得
const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
});

// 録音の開始
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();

// 録音中に音声を配列に追加
const chunks = [];
mediaRecorder.ondataavailable = e => {
  chunks.push(e.data);
};

// 録音終了時に音声再生用のURLを発行
let audioURL;
mediaRecorder.onstop = () => {
  const audioBlob = new Blob(chunks);
  audioUrl = window.URL.createObjectURL(audioBlob);
};

const audioBlob = new Blob(chunks, { type: "audio/wav" });

mediaRecorder.stop();
stream.getTracks().forEach(track => {
  track.stop();
});

<audio id="audio" controls></audio>

const audioElement = document.getElementById("audio");
audioElement.src = audioURL;

const downloadElement = document.createElement("a");
downloadElement.href = audioURL;
downloadElement.download = 'recording.mp3';
downloadElement.click();

window.URL.revokeObjectURL(audioURL);

const Recording = () => {
  const supportedAudioTypes = ["wav", "mp3", "flac"]

  const [recording, setRecording] = useState(false) // 録音中かどうか
  const [audioURL, setAudioURL] = useState("")
  const [audioType, setAudioType] = useState("wav")
  const mediaRecorderRef = useRef()
  const streamRef = useRef()
  const chunksRef = useRef()

  const recordingStart = async () => {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      try {
        setRecording(true)
        if (audioURL) {
          window.URL.revokeObjectURL(audioURL)
        }

        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
        })

        const mediaRecorder = new MediaRecorder(stream)
        mediaRecorder.start()

        const chunks = []
        mediaRecorder.ondataavailable = e => {
          chunks.push(e.data)
        }

        mediaRecorder.onstop = () => {
          const audioBlob = new Blob(chunks)
          const url = window.URL.createObjectURL(audioBlob)
          setAudioURL(url)
        }

        streamRef.current = stream
        mediaRecorderRef.current = mediaRecorder
        chunksRef.current = chunks
      } catch (e) {
        // 失敗したとき
        console.error(e)
        setRecording(false)
      }
    }
  }

  const recordingStop = () => {
    mediaRecorderRef?.current.stop()
    streamRef?.current.getTracks().forEach(track => {
      track.stop()
    })
    setRecording(false)
  }

  const clickButton = () => {
    if (recording) {
      recordingStop()
    } else {
      recordingStart()
    }
  }

  const downloadRecording = () => {
    if (
      chunksRef &&
      chunksRef.current &&
      supportedAudioTypes.includes(audioType)
    ) {
      const audioBlob = new Blob(chunksRef.current, {
        type: `audio/${audioType}`,
      })

      const tempURL = window.URL.createObjectURL(audioBlob)

      const downloadElement = document.createElement("a")
      downloadElement.href = tempURL
      downloadElement.download = `recording.${audioType}`
      downloadElement.click()
      window.URL.revokeObjectURL(tempURL)
    }
  }

  return (
    <>
      <h1>シンプル録音ツール</h1>
      <div className="recording-main-menu">
        <div className="recording-buttons">
          <button
            className="simple-button"
            onClick={clickButton}
          >
            {recording ? "録音終了" : "録音開始"}
          </button>
        </div>
        <audio controls src={audioURL} controlsList="nodownload"></audio>
        <div className="recording-download-menu">
          <span>
            ダウンロードする形式：
            <select
              value={audioType}
              onChange={e => setAudioType(e.target.value)}
            >
              {supportedAudioTypes.map(type => {
                return (
                  <option key={type} value={type}>
                    {type}
                  </option>
                )
              })}
            </select>
          </span>
          <button
            className="simple-button"
            disabled={!audioURL}
            onClick={downloadRecording}
          >
            録音のダウンロード
          </button>
        </div>
      </div>
    </>
  )
}