该媒体捕获和流API（又名MediaStream API）允许你记录从用户的麦克风声音，然后得到的录音或媒体元素的轨道。然后，你可以在录制后直接播放这些曲目，也可以将媒体上传到你的服务器。
Node如何录制音频？在本教程中，我们将创建一个网站，该网站将使用 Media Streams API 来允许用户录制某些内容，然后将录制的音频上传到服务器进行保存。用户还可以查看和播放所有上传的录音，那么我们如何使用MediaStream API录制音频呢？下面是详细的实现步骤：
你可以在此 GitHub 存储库 中找到本教程的完整代码。
设置服务器
MediaStream API录制音频实例：我们将首先创建一个Node.js和Express服务器。因此，如果你的机器上没有Node.js，请首先确保下载并安装 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除非在环境中设置了端口，并且它公开了一个目录public/assets——我们将很快创建——将保存 JavaScript 和 CSS 文件和图像。
添加脚本
最后，start在scriptsin下添加一个脚本package.json：
"scripts": {
"start": "nodemon index.js"
},
启动网络服务器
让我们测试我们的服务器。运行以下命令来启动服务器：
npm start
服务器应该从端口 3000 开始。你可以尝试在 上访问它localhost:3000，但是你将看到一条消息说“无法 GET /”，因为我们还没有定义任何路由。
创建录制页面
如何使用MediaStream API录制音频？接下来，我们将创建将成为网站主页的页面。用户将使用此页面来记录、查看和播放录音。
创建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">
<button class="bg-transparent border btn record-button rounded-circle shadow-sm text-center" id="recordButton">
<img src="/images/microphone.png" alt="如何使用MediaStream API录制音频？分步指南" alt="Record" class="img-fluid" />
</button>
</div>
</div>
</body>
</html>
此页面使用Bootstrap 5进行样式设置。目前，该页面仅显示用户可用于录制的按钮。
请注意，我们为麦克风使用了图像。你可以在Iconscout上下载图标，也可以使用GitHub 存储库中的修改版本。
下载图标并将其放置public/assets/images在名称中microphone.png。
添加样式
我们还链接了 stylesheet 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;
}
创建路由
Node如何录制音频？最后，我们只需要在index.js. 在之前添加以下内容app.listen：
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
如果服务器尚未运行，请使用npm start. 然后localhost:3000在浏览器中访问。你会看到一个录制按钮。
现在，按钮什么都不做。我们需要绑定一个点击事件来触发录音。
创建一个public/assets/js/record.js包含以下内容的文件：
//initialize elements we'll use
const recordButton = document.getElementById('recordButton');
const recordButtonImage = recordButton.firstElementChild;
let chunks = []; //will be used later to record audio
let mediaRecorder = null; //will be used later to record audio
let audioBlob = null; //the blob that will hold the recorded audio
我们正在初始化稍后将使用的变量。然后创建一个record函数，它将作为点击事件的监听器recordButton：
function record() {
//TODO start recording
}
recordButton.addEventListener('click', record);
我们还将此函数作为事件侦听器附加到记录按钮上。
媒体录制
如何使用MediaStream API录制音频？为了开始录制，我们需要使用mediaDevices.getUserMedia()方法。
这种方法允许我们获取流并记录用户的音频和/或视频，只有在用户为网站提供权限后才能这样做。该getUserMedia方法允许我们访问本地输入设备。
getUserMedia接受MediaStreamConstraints的对象作为参数，该对象包含一组约束，这些约束指定我们将从中获得的流中的预期媒体类型getUserMedia。这些约束可以是带有布尔值的音频和视频。
如果值为 false，则表示我们对访问此设备或录制此媒体不感兴趣。
getUserMedia返回一个承诺。如果用户允许网站录制，promise 的执行处理程序会接收一个MediaStream对象，我们可以使用它来媒体捕获用户的视频或音频流。
媒体捕获和流
要使用 MediaStream API 对象来捕获媒体轨道，我们需要使用MediaRecorder接口。我们需要创建一个新的接口对象，该对象在构造函数中接受 MediaStream 对象，并允许我们通过其方法轻松控制录制。
在record函数内部，添加以下内容：
//check if browser supports getUserMedia
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert('Your browser does not support recording!');
return;
}
// browser supports getUserMedia
// change image in button
recordButtonImage.src = `/images/${mediaRecorder && mediaRecorder.state === 'recording' ? 'microphone' : 'stop'}.png`;
if (!mediaRecorder) {
// start recording
navigator.mediaDevices.getUserMedia({
audio: true,
})
.then((stream) => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.ondataavailable = mediaRecorderDataAvailable;
mediaRecorder.onstop = mediaRecorderStop;
})
.catch((err) => {
alert(`The following error occurred: ${err}`);
// change image in button
recordButtonImage.src = '/images/microphone.png';
});
} else {
// stop recording
mediaRecorder.stop();
}
浏览器支持
我们首先检查navigator.mediaDevices和是否navigator.mediaDevices.getUserMedia已定义，因为有些浏览器如 Internet Explorer、Android 上的 Chrome 或其他不支持它的浏览器。
此外，使用getUserMedia需要安全的网站，这意味着页面要么使用 HTTPS 加载file://，要么来自localhost. 因此，如果页面未安全加载，mediaDevices并且getUserMedia将是未定义的。
开始录音
Node如何录制音频？如果条件为假（即，都支持mediaDevices和getUserMedia），我们首先将录制按钮的图像更改为stop.png，你可以从Iconscout或GitHub 存储库下载并将其放置在public/assets/images.
然后，我们检查mediaRecorder——我们在文件开头定义的——是否为空。
如果它为空，则表示没有正在进行的录制。所以，我们得到一个 MediaStream 实例来开始使用getUserMedia.
我们向它传递一个只有 keyaudio和 value的对象true，因为我们只是在录制音频。
这是浏览器提示用户允许网站访问麦克风的地方。如果用户允许，将执行执行处理程序中的代码：
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.ondataavailable = mediaRecorderDataAvailable;
mediaRecorder.onstop = mediaRecorderStop;
在这里，我们正在创建一个 new MediaRecorder，并将其分配给mediaRecorder我们在文件开头定义的。
我们正在传递从 接收到的流的构造函数getUserMedia。然后，我们使用mediaRecorder.start()开始录制。
最后，我们将事件处理程序（我们将很快创建）绑定到两个事件，dataavailable以及stop.
我们还添加了一个catch处理程序，以防用户不允许网站访问麦克风或可能引发的任何其他异常。
停止录音
如果mediaRecorder不为空，这一切都会发生。如果它为空，则表示有正在进行的录制并且用户正在结束它。所以，我们使用mediaRecorder.stop()方法来停止录制：
} else {
//stop recording
mediaRecorder.stop();
}
处理媒体录制事件
MediaStream API录制音频实例：到目前为止，我们的代码在用户单击录制按钮时开始和停止录制。接下来，我们将添加事件处理程序dataavailable和stop。
关于可用数据
该dataavailable事件在完成完整记录时触发，或基于timeslice传递给的可选参数mediaRecorder.start()以指示应触发此事件的毫秒数。传递时间片允许对记录进行切片并以块的形式获取它。
创建mediaRecorderDataAvailable函数，该函数将dataavailable通过将接收到的BlobEvent参数中的Blob音轨添加到我们在文件开头定义的数组中来处理事件：chunks
function mediaRecorderDataAvailable(e) {
chunks.push(e.data);
}
该块将是用户录音的音轨数组。
停止时
在创建mediaRecorderStop将处理停止事件的 之前，让我们首先添加 HTML 元素容器，该容器将使用Save和Discard按钮保存录制的音频。
public/index.html在结束</body>标记之前添加以下内容：
<div class="recorded-audio-container mt-5 d-none flex-column justify-content-center align-items-center"
id="recordedAudioContainer">
<div class="actions mt-3">
<button class="btn btn-success rounded-pill" id="saveButton">Save</button>
<button class="btn btn-danger rounded-pill" id="discardButton">Discard</button>
</div>
</div>
然后，在 的开头public/assets/js/record.js，添加一个变量，该变量将成为#recordedAudioContainer元素的 Node 实例：
const recordedAudioContainer = document.getElementById('recordedAudioContainer');
MediaStream API录制音频实例：我们现在可以实现mediaRecorderStop. 该函数将首先删除任何之前录制但未保存的音频元素，创建一个新的音频媒体元素，将 设置src为录制流的 Blob，并显示容器：
function mediaRecorderStop () {
//check if there are any previous recordings and remove them
if (recordedAudioContainer.firstElementChild.tagName === 'AUDIO') {
recordedAudioContainer.firstElementChild.remove();
}
//create a new audio element that will hold the recorded audio
const audioElm = document.createElement('audio');
audioElm.setAttribute('controls', ''); //add controls
//create the Blob from the chunks
audioBlob = new Blob(chunks, { type: 'audio/mp3' });
const audioURL = window.URL.createObjectURL(audioBlob);
audioElm.src = audioURL;
//show audio
recordedAudioContainer.insertBefore(audioElm, recordedAudioContainer.firstElementChild);
recordedAudioContainer.classList.add('d-flex');
recordedAudioContainer.classList.remove('d-none');
//reset to default
mediaRecorder = null;
chunks = [];
}
最后，我们将重置mediaRecorder并chunks恢复到它们的初始值以处理下一个录音。使用此代码，我们的网站应该能够录制音频，并且当用户停止时，它允许他们播放录制的音频。
我们需要做的最后一件事是链接到record.jsin index.html。script在 的末尾添加body：
<script src="/js/record.js"></script>
测试录音
如何使用MediaStream API录制音频？让我们现在看看。转到localhost:3000浏览器，然后单击录制按钮。系统会要求你允许该网站使用麦克风。
即使你使用受支持的浏览器，也请确保在本地主机或 HTTPS 服务器上加载网站。MediaDevices 和getUserMedia在其他条件下不可用。
单击“允许”。然后麦克风图像将更改为停止图像。此外，你应该会根据浏览器在地址栏中看到一个录音图标。这表明该麦克风当前正在被网站访问。
尝试记录几秒钟。然后点击停止按钮。按钮的图像将变回麦克风图像，音频播放器将显示两个按钮 — Save和Discard。
接下来，我们将实现Save和Discard按钮的点击事件。在保存按钮应该上传音频服务器，以及放弃按钮应该将其删除。
Discard单击事件处理程序
Node如何录制音频？我们将首先实现Discard按钮的事件处理程序。单击此按钮应首先向用户显示提示，以确认他们要放弃录音。然后，如果用户确认，它将移除音频播放器并隐藏按钮。
将保存Discard按钮的变量添加到 的开头public/assets/js/record.js：
const discardAudioButton = document.getElementById('discardButton');
然后，将以下内容添加到文件末尾：
function discardRecording () {
//show the user the prompt to confirm they want to discard
if (confirm('Are you sure you want to discard the recording?')) {
//discard audio just recorded
resetRecording();
}
}
function resetRecording () {
if (recordedAudioContainer.firstElementChild.tagName === 'AUDIO') {
//remove the audio
recordedAudioContainer.firstElementChild.remove();
//hide recordedAudioContainer
recordedAudioContainer.classList.add('d-none');
recordedAudioContainer.classList.remove('d-flex');
}
//reset audioBlob for the next recording
audioBlob = null;
}
//add the event listener to the button
discardAudioButton.addEventListener('click', discardRecording);
你现在可以尝试录制一些内容，然后单击“放弃”按钮。音频播放器将被移除并隐藏按钮。
上传到服务器
保存点击事件处理程序
现在，我们将为Save按钮实现点击处理程序。当用户单击“保存”按钮时，此处理程序将audioBlob使用Fetch API上传到服务器。
如果你不熟悉 Fetch API，你可以在我们的“ Fetch API 简介”教程中了解更多信息。
让我们从uploads在项目根目录中创建一个目录开始：
mkdir uploads
然后，在 的开头record.js，添加一个将保存保存按钮元素的变量：
const saveAudioButton = document.getElementById('saveButton');
然后，在最后添加以下内容：
function saveRecording () {
//the form data that will hold the Blob to upload
const formData = new FormData();
//add the Blob to formData
formData.append('audio', audioBlob, 'recording.mp3');
//send the request to the endpoint
fetch('/record', {
method: 'POST',
body: formData
})
.then((response) => response.json())
.then(() => {
alert("Your recording is saved");
//reset for next recording
resetRecording();
//TODO fetch recordings
})
.catch((err) => {
console.error(err);
alert("An error occurred, please try again later");
//reset for next recording
resetRecording();
})
}
//add the event handler to the click event
saveAudioButton.addEventListener('click', saveRecording);
请注意，一旦录音上传，我们将resetRecording用于重置下一个录音的音频。稍后，我们将获取所有录音以显示给用户。
创建 API 端点
MediaStream API录制音频实例：我们现在需要实现 API 端点。端点将音频上传到uploads目录。
为了在 Express 中轻松处理文件上传，我们将使用库Multer。Multer 提供了一个中间件来处理文件上传。
运行以下命令进行安装：
npm i multer
然后，在 中index.js，将以下内容添加到文件的开头：
const fs = require('fs');
const multer = require('multer');
const storage = multer.diskStorage({
destination(req, file, cb) {
cb(null, 'uploads/');
},
filename(req, file, cb) {
const fileNameArr = file.originalname.split('.');
cb(null, `${Date.now()}.${fileNameArr[fileNameArr.length - 1]}`);
},
});
const upload = multer({ storage });
我们声明了storageusing multer.diskStorage，我们将其配置为将文件存储在uploads目录中，并且我们正在根据带有扩展名的当前时间戳保存文件。
然后，我们声明了upload，这将是上传文件的中间件。
接下来，我们要使uploads目录中的文件可公开访问。因此，在之前添加以下内容app.listen：
app.use(express.static('uploads'));
最后，我们将创建上传端点。此端点将仅使用upload中间件上传音频并返回 JSON 响应：
app.post('/record', upload.single('audio'), (req, res) => res.json({ success: true }));
该upload中间件将处理文件上传。我们只需要传递我们要上传到的文件的字段名称upload.single。
请注意，通常情况下，你需要对文件进行验证并确保上传的是正确的、预期的文件类型。为简单起见，我们在本教程中省略了这一点。
测试上传
让我们来测试一下。localhost:3000再次转到浏览器，记录一些内容，然后单击“保存”按钮。
请求将发送到端点，文件将被上传，并向用户显示警报以通知他们记录已保存。
你可以通过检查uploads项目根目录下的目录来确认音频确实已上传。你应该在那里找到一个 MP3 音频文件。
显示录音
创建 API 端点
如何使用MediaStream API录制音频？我们要做的最后一件事是向用户显示所有录音，以便他们可以播放。
首先，我们将创建用于获取所有文件的端点。在app.listenin之前添加以下内容index.js：
app.get('/recordings', (req, res) => {
let files = fs.readdirSync(path.join(__dirname, 'uploads'));
files = files.filter((file) => {
// check that the files are audio files
const fileNameArr = file.split('.');
return fileNameArr[fileNameArr.length - 1] === 'mp3';
}).map((file) => `/${file}`);
return res.json({ success: true, files });
});
我们只是读取uploads目录中的文件，过滤它们以仅获取mp3文件，并/在每个文件名后附加一个。最后，我们返回一个带有文件的 JSON 对象。
添加录音容器元素
接下来，我们将添加一个 HTML 元素，该元素将作为我们将显示的录音的容器。在record.js脚本前的正文末尾添加以下内容：
<h2 class="mt-3">Saved Recordings</h2>
<div class="recordings row" id="recordings">
</div>
从 API 获取文件
Node如何录制音频？还要添加到record.js将保存#recordings元素的变量的开头：
const recordingsContainer = document.getElementById('recordings');
然后，我们将添加一个fetchRecordings函数，该函数将调用我们之前创建的端点，然后使用该createRecordingElement函数渲染将成为音频播放器的元素。
我们还将playRecording为将播放音频的按钮上的单击事件添加一个事件侦听器。
在末尾添加以下内容record.js：
function fetchRecordings () {
fetch('/recordings')
.then((response) => response.json())
.then((response) => {
if (response.success && response.files) {
//remove all previous recordings shown
recordingsContainer.innerHTML = '';
response.files.forEach((file) => {
//create the recording element
const recordingElement = createRecordingElement(file);
//add it the the recordings container
recordingsContainer.appendChild(recordingElement);
})
}
})
.catch((err) => console.error(err));
}
//create the recording element
function createRecordingElement (file) {
//container element
const recordingElement = document.createElement('div');
recordingElement.classList.add('col-lg-2', 'col', 'recording', 'mt-3');
//audio element
const audio = document.createElement('audio');
audio.src = file;
audio.onended = (e) => {
//when the audio ends, change the image inside the button to play again
e.target.nextElementSibling.firstElementChild.src = 'images/play.png';
};
recordingElement.appendChild(audio);
//button element
const playButton = document.createElement('button');
playButton.classList.add('play-button', 'btn', 'border', 'shadow-sm', 'text-center', 'd-block', 'mx-auto');
//image element inside button
const playImage = document.createElement('img');
playImage.src = '/images/play.png';
playImage.classList.add('img-fluid');
playButton.appendChild(playImage);
//add event listener to the button to play the recording
playButton.addEventListener('click', playRecording);
recordingElement.appendChild(playButton);
//return the container element
return recordingElement;
}
function playRecording (e) {
let button = e.target;
if (button.tagName === 'IMG') {
//get parent button
button = button.parentElement;
}
//get audio sibling
const audio = button.previousElementSibling;
if (audio && audio.tagName === 'AUDIO') {
if (audio.paused) {
//if audio is paused, play it
audio.play();
//change the image inside the button to pause
button.firstElementChild.src = 'images/pause.png';
} else {
//if audio is playing, pause it
audio.pause();
//change the image inside the button to play
button.firstElementChild.src = 'images/play.png';
}
}
}
请注意，在playRecording函数内部，我们正在使用 来检查音频是否正在播放audio.paused，如果当前没有播放音频，它将返回 true。
我们还使用将显示在每个录音中的播放和暂停图标。你可以从Iconscout或GitHub 存储库获取这些图标。
我们将fetchRecordings在页面加载和新录音上传时使用。
因此，record.js在执行处理程序的末尾和内部调用该函数saveRecording来代替TODO注释：
.then(() => {
alert("Your recording is saved");
//reset for next recording
resetRecording();
//fetch recordings
fetchRecordings();
})
添加样式
我们需要做的最后一件事是为我们正在创建的元素添加一些样式。将以下内容添加到public/assets/css/index.css：
.play-button:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.play-button {
height: 8em;
width: 8em;
background-color: #5084d2;
}
测试一切
现在一切准备就绪。localhost:3000在浏览器中打开网站，如果你之前上传过任何录音，现在你会看到它们。你也可以尝试上传新的并查看列表更新。
用户现在可以录制他们的声音、保存或丢弃它们。用户还可以查看所有上传的录音并播放它们。
结论
Node如何录制音频？使用 MediaStream API 允许我们为用户添加媒体功能，例如录制音频。MediaStream Web API 还允许录制视频、截取屏幕截图等。按照本教程中提供的信息以及MDN提供的有用教程，你还可以将所有其他媒体功能添加到你的网站。
