如何使用 MediaStream API 录制音频！

最新推荐文章于 2024-04-17 12:52:30 发布

新钛云服

最新推荐文章于 2024-04-17 12:52:30 发布

阅读量973

点赞数

本文链接：https://blog.csdn.net/NewTyun/article/details/121646667

版权

新钛云服已为您服务1330天

Media Capture and Streams API（又名 MediaStream API）允许您从用户的麦克风录制音频，然后将录制的音频或媒体元素作为音轨获取。然后，您可以在录制后直接播放这些曲目，也可以将录制的媒体上传到您的服务器。

在本教程中，我们将创建一个网站，该网站将使用 Media Streams API 来允许用户录制某些内容，然后将录制的音频上传到服务器进行保存。用户还可以查看和播放所有上传的录音。

您可以在此 https://github.com/sitepoint-editors/mediastream-tutorial 仓库中找到本教程的完整代码。

准备一个服务器

我们将首先基于Node.js创建一个Express服务，如果您的机器上没有Node.js，请务必下载并安装它。

创建一个目录

mkdir recording-tutorial
cd recording-tutorial

初始化项目

然后，用npm初始化项目：

npm init -y   //选项 -y 使用默认值创建 package.json

安装需要依赖的包

接下来，我们将为我们正在创建的服务器安装 Express 并借用nodemon让其支持热重启：

npm i express nodemon

创建一个express服务

我们现在可以从创建一个简单的服务器开始。在根目录中创建index.js并填写以下代码：

const path= require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.static('public/assets'));

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

创建一个服务器，当前环境中如果没有启用了3000端口的话它将在3000端口上运行，并且提供了一个静态资源目录public/assets--我们将很快创建它来保存JavaScript和CSS文件以及图片。

添加脚本

最后，在package.json中的scripts下添加一个启动脚本：

"scripts": {
  "start": "nodemon index.js"
},

启动web服务

让我们来测试下创建的服务器，运行以下命令启动服务器：

npm start

服务器应从3000端口监听,你可以尝试访问localhost:3000，但你会看到一个消息说："Cannot GET /"，这是因为我们没有定义任何路由。

创建一个录音的页面

接下来，我们将创建一个主页面,用户将使用此页面记录、查看和播放录音

在public目录中创建包含以下内容的index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Record</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
 <link href="/css/index.css" rel="stylesheet" />
</head>
<body class="pt-5">
  <div class="container">
    <h1 class="text-center">Record Your Voice</h1>
    <div class="record-button-container text-center mt-5">
      <buttonclass="bg-transparent border btn record-button rounded-circle shadow-sm text-center" id="recordButton">
        <img src="/images/microphone.png" alt="Record" class="img-fluid" />
      </button>
    </div>
  </div>
</body>
</html>

这个页面使用Bootstrap 5进行样式设置。目前，该页面只显示了一个用户可以用来录制的按钮。

请注意，我们正在使用图标为麦克风设计一个按钮, 你可以在Iconscout上下载图标，也可以使用GitHub存储库中的修改。

下载图标并将其放在public/assets/images中，名称为microphone.png。

添加样式

我们要引用样式表index.css，所以创建一个public/assets/css/index.css文件，内容如下。

.record-button {
  height: 8em;
  width: 8em;
  border-color: #f3f3f3!important;
}

.record-button:hover {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

创建路由

最后，我们只需要在index.js中添加新的路由。在app.listen之前添加以下内容：

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));

最低0.47元/天解锁文章

新钛云服

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何使用 MediaStream API 录制音频！

新钛云服已为您服务1330天Media Capture and Streams API（又名 MediaStream API）允许您从用户的麦克风录制音频，然后将录制的音频或媒体元素作为...
复制链接

扫一扫