Implement Audio Recording in Vue with js-audio-recorder and Upload Blob to SpringBoot

Plugin Overview

js-audio-recorder is a pure JavaScript library that enables browser‑side audio recording with features such as start, pause, resume, playback, PCM/WAV export, channel selection, sample‑rate configuration, and optional real‑time conversion.

Installation

npm i js-audio-recorder

Vue Component Setup

Import the recorder and create an instance in the component’s data() method, configuring sample bits, sample rate, channel count, and the optional compiling flag.

import Recorder from 'js-audio-recorder';
export default {
  data() {
    return {
      recorder: new Recorder({
        sampleBits: 16, // 8 or 16, default 16
        sampleRate: 16000, // supported rates: 11025,16000,22050,24000,44100,48000
        numChannels: 1, // 1 or 2, default 1
        compiling: false // real‑time conversion, default false
      })
    };
  }
};

Recording Controls

Methods for starting, stopping, and playing the audio use the recorder’s API. Permission is requested via Recorder.getPermission(); on denial a message prompts the user to allow microphone access.

startRecordAudio() {
  Recorder.getPermission().then(() => {
    console.log('开始录音');
    this.recorder.start();
  }, error => {
    this.$message({ message: '请先允许该网页使用麦克风', type: 'info' });
    console.log(`${error.name} : ${error.message}`);
  });
},
stopRecordAudio() {
  console.log('停止录音');
  this.recorder.stop();
},
playRecordAudio() {
  console.log('播放录音');
  this.recorder.play();
}

Exporting Audio Data

PCM and WAV blobs are obtained with recorder.getPCMBlob() and recorder.getWAVBlob(). The blobs can be downloaded directly or further processed.

getPCMRecordAudioData() {
  var pcmBlob = this.recorder.getPCMBlob();
  console.log(pcmBlob);
},
getWAVRecordAudioData() {
  var wavBlob = this.recorder.getWAVBlob();
  console.log(wavBlob);
},
downloadPCMRecordAudioData() {
  this.recorder.downloadPCM('badao');
},
downloadWAVRecordAudioData() {
  this.recorder.downloadWAV('badao');
}

Uploading WAV Blob to SpringBoot

The WAV blob is wrapped in a File object with a timestamped filename, appended to a FormData instance, and sent via a POST request defined in @/api/system/audioRecorder.

uploadWAVData() {
  var wavBlob = this.recorder.getWAVBlob();
  var formData = new FormData();
  const newBlob = new Blob([wavBlob], { type: 'audio/wav' });
  const fileOfBlob = new File([newBlob], new Date().getTime() + '.wav');
  formData.append('file', fileOfBlob);
  uploadWavData(formData).then(response => {
    console.log(response);
  });
}

The request utility sends the form data to the endpoint /common/uploadWavFile using the post method.

export function uploadWavData(data) {
  return request({
    url: '/common/uploadWavFile',
    method: 'post',
    data: data
  });
}

SpringBoot Controller

The backend receives the multipart file, stores it using the RuoYi file‑upload utilities, and returns the file name and URL.

@PostMapping("/common/uploadWavFile")
public AjaxResult uploadWavFile(MultipartFile file) throws Exception {
  try {
    String filePath = RuoYiConfig.getUploadPath();
    String fileName = FileUploadUtils.upload(filePath, file, MimeTypeUtils.MEDIA_EXTENSION);
    String url = serverConfig.getUrl() + fileName;
    AjaxResult ajax = AjaxResult.success();
    ajax.put("fileName", fileName);
    ajax.put("url", url);
    return ajax;
  } catch (Exception e) {
    return AjaxResult.error(e.getMessage());
  }
}

Important Notes

The backend upload utility expects the file’s MIME type to be listed in MimeTypeUtils.MEDIA_EXTENSION; otherwise validation fails.

Browsers require HTTPS (or localhost) for getUserMedia in recent Chrome versions.

Ensure the microphone permission is granted; otherwise the recorder cannot start.