Web音频录制和播放从入门到精通，助你掌握音效操控之术

前端

2023-04-19 10:44:00

在浏览器中轻松录制、播放和上传音频

环境配置

准备工作的第一步是配置你的环境。确保你已安装：

Node.js 10 或更高版本
npm 6 或更高版本
git，用于克隆项目模板

项目模板克隆

接下来，克隆项目模板：

打开终端或命令提示符。
导航到你的项目工作目录。
运行以下命令：

git clone https://github.com/username/web-audio-recorder.git

安装依赖

进入项目目录后，运行以下命令安装依赖项：

npm install

开始录制

在项目目录中，打开 index.html 文件。你会看到 HTML 和 JavaScript 代码。HTML 代码创建录制按钮、重录按钮、暂停按钮、继续按钮和结束按钮。JavaScript 代码处理这些按钮的点击事件并控制音频录制。

点击 "开始录制" 按钮，浏览器将请求访问你的麦克风。允许后，录制将开始。

重录、暂停、继续录制和结束录制

你可以随时：

点击 "重录" 按钮重新开始录制。
点击 "暂停" 按钮暂停录制。
点击 "继续" 按钮继续录制。
点击 "结束录制" 按钮结束录制。

播放录制

录制完成后，点击 "播放" 按钮播放录制好的音频。

上传到腾讯云或阿里云

要将录制好的音频上传到腾讯云或阿里云：

获取存储桶名称、密钥 ID 和密钥密钥。
在项目目录中创建一个上传脚本，例如 upload.js。
在上传脚本中，使用腾讯云或阿里云提供的 SDK 上传音频文件。

代码示例

// 开始录制
const startRecording = () => {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      // 创建媒体记录器
      const mediaRecorder = new MediaRecorder(stream);

      // 开始录制
      mediaRecorder.start();
    })
    .catch(error => {
      console.error(error);
    });
};

// 结束录制
const stopRecording = () => {
  mediaRecorder.stop();
};

// 将录制好的音频上传到腾讯云或阿里云
const uploadRecording = () => {
  // 获取存储桶名称、密钥 ID 和密钥密钥
  const bucketName = "my-bucket";
  const accessKeyId = "AKIAIOSFODNN7EXAMPLE";
  const secretAccessKey = "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY";

  // 使用腾讯云或阿里云 SDK 上传音频文件
  const s3 = new AWS.S3({
    accessKeyId,
    secretAccessKey,
  });

  s3.putObject({
    Bucket: bucketName,
    Key: "my-recording.wav",
    Body: recordedAudioBlob,
  }, (err, data) => {
    if (err) {
      console.error(err);
    } else {
      console.log("Audio uploaded successfully.");
    }
  });
};