如何使用 React JS 将 WEBA 或 Opus 音频文件转换为 Mp3?
How to convert WEBA or Opus audio file to Mp3 using React JS?
我想在客户端实现一个转换器。
有没有可能做到这一点?
Actual Format of the recorded file
这个使用 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
我想在客户端实现一个转换器。 有没有可能做到这一点?
Actual Format of the recorded file
这个使用 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