CODEWITHSUNDEEP
reactjsaudiomp3
Thilanka
Thilanka

Reputation: 63

How to convert WEBA or Opus audio file to Mp3 using React JS?

I want to implement a converter on the Client-side. Is there any possibility to do that?

Actual Format of the recorded file

Upvotes: 2

Views: 2687

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13225

This one uses webassembly to convert the WEBM to audio/mp3

import React from "react";
import { render } from "react-dom";
import vmsg from "vmsg";

const recorder = new vmsg.Recorder({
  wasmURL: "https://unpkg.com/[email protected]/vmsg.wasm"
});

class App extends React.Component {
  state = {
    isLoading: false,
    isRecording: false,
    recordings: []
  };
  record = async () => {
    this.setState({ isLoading: true });

    if (this.state.isRecording) {
      const blob = await recorder.stopRecording();
      this.setState({
        isLoading: false,
        isRecording: false,
        recordings: this.state.recordings.concat(URL.createObjectURL(blob))
      });
    } else {
      try {
        await recorder.initAudio();
        await recorder.initWorker();
        recorder.startRecording();
        this.setState({ isLoading: false, isRecording: true });
      } catch (e) {
        console.error(e);
        this.setState({ isLoading: false });
      }
    }
  };
  render() {
    const { isLoading, isRecording, recordings } = this.state;
    return (
      <React.Fragment>
        <button disabled={isLoading} onClick={this.record}>
          {isRecording ? "Stop" : "Record"}
        </button>
        <ul style={{ listStyle: "none", padding: 0 }}>
          {recordings.map(url => (
            <li key={url}>
              <audio src={url} controls />
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

Code sanbox => https://codesandbox.io/s/patient-tree-9ub7x?file=/src/App.js

Upvotes: 1

Related Questions