如何使用 React JS 将 WEBA 或 Opus 音频文件转换为 Mp3？

Posted 2023-02-25

【中文标题】如何使用 React JS 将 WEBA 或 Opus 音频文件转换为 Mp3？

【英文标题】：How to convert WEBA or Opus audio file to Mp3 using React JS?

【发布时间】：2021-06-07 16:54:45

【问题描述】：

我想在客户端实现一个转换器。 有没有可能这样做？

Actual Format of the recorded file

【问题讨论】：

这 (***.com/questions/16881703/…) 能回答您的问题吗？

我正在使用 react-media-recorder npm 包进行录制。它以 wav 形式输出。我想将其转换为 MP3。

【参考方案1】：

这个使用webassembly将WEBM转换为audio/mp3

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

const recorder = new vmsg.Recorder(
  wasmURL: "https://unpkg.com/vmsg@0.3.0/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>
    );
  

代码沙箱 => https://codesandbox.io/s/patient-tree-9ub7x?file=/src/App.js

【讨论】：

非常感谢您的回答。同样的问题也发生在这里。即使它给出的格式为.mp3。实际的文件格式是 WebM。我想显示录制时间。我用几张截图编辑了我的问题。

@Thilanka，我已经更新了答案。现在它将 WebM 音频转换为 mp3 格式。验证后请将此标记为答案。谢谢！！