我有一个简单的项目,我正在录制一个音频,然后将录制的音频保存在系统目录中。我已经完成了录制部分,但现在我试图在单击按钮时使用node js将录制的音频保存在系统中。但在创建一个api时,我得到了下面的错误。我很困惑我是否正确地做了这件事。
这是我的Record.js文件:
import React from "react";
import MicRecorder from "mic-recorder-to-mp3";
import { Button } from "reactstrap";
import "./App.css";
import Navbar from "./Navbar";
import mic from "./imgs/mic.png";
import stop from "./imgs/stop.png";
import axios from "axios";
const Mp3Recorder = new MicRecorder({ bitRate: 128 });
class Record extends React.Component {
constructor(props) {
super(props);
this.state = {
isRecording: false,
blobURL: "",
isBlocked: false,
};
}
start = () => {
if (this.state.isBlocked) {
console.log("Permission Denied");
} else {
Mp3Recorder.start()
.then(() => {
this.setState({ isRecording: true });
})
.catch((e) => console.error(e));
}
};
stop = () => {
Mp3Recorder.stop()
.getMp3()
.then(([buffer, blob]) => {
const blobURL = URL.createObjectURL(blob);
this.setState({ blobURL, isRecording: false });
})
.catch((e) => console.log(e));
};
componentDidMount() {
navigator.getUserMedia(
{ audio: true },
() => {
console.log("Permission Granted");
this.setState({ isBlocked: false });
},
() => {
console.log("Permission Denied");
this.setState({ isBlocked: true });
}
);
}
Save = (e) => {
e.preventDefault();
const url = "localhost:8000/record";
const data = new FormData();
data.append("audio", this.state.blobURL);
axios.post(url, data).then((e) => {
console.log("success");
});
alert("audio uploaded successfully");
};
render() {
return (
<div className="big-wrapper light">
<div className="container">
<Navbar />
<br />
<br />
<br />
<div className="cont1">
<h2 style={{ color: "white", marginLeft: "-98px" }}>
Remove Noise From Your Audio
</h2>
<br />
<Button
className="bg-transparent border btn record-button rounded-circle shadow-sm text-center"
id="recordButton"
onClick={() => {
this.state.isRecording ? this.stop() : this.start();
}}
>
{this.state.isRecording ? <img src={stop} /> : <img src={mic} />}
</Button>
<br />
<br />
<audio
src={this.state.blobURL}
controls="controls"
autoPlay
id="audio-element"
/>
<br />
<br />
<form
method="post"
action="#"
id="#"
onSubmit={this.Save}
className="form-group"
>
<button className="btn-recordaudio">Submit</button>
</form>
</div>
</div>
</div>
);
}
}
export default Record;
这是我的index.js文件:
const path = require("path");
const fs = require("fs");
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.static("uploads"));
const storage = multer.diskStorage({
destination(req, file, cb) {
// directory to save the audio
cb(null, "uploads/");
},
filename(req, file, cb) {
const fileNameArr = file.originalname.split(".");
// file name
cb(null, `recording.${fileNameArr[fileNameArr.length - 1]}`);
},
});
const upload = multer({ storage });
app.post("/record", upload.single("audio"), (req, res) =>
res.json({
success: true,
})
);
app.listen(8000, () => {
console.log("server is running");
});
如果我做错了什么,请纠正我。
1条答案
按热度按时间pcww981p1#
代码ERR_BAD_REQUEST表示您的请求错误
然后查看消息“不支持的协议localhost:“
所以,我认为问题是你没有定义它是http还是https
因此,请尝试改用http://127.0.0.1:3000