数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在JavaScript中录制和播放音频？
您是否也希望在您的Web应用程序中添加自定义音频录制功能？如果是，那么您来对地方了，因为在本教程中，我们将学习如何使用JavaScript录制和播放音频。
一些应用程序，例如Discord，允许您录制音频并将其存储在其中，以便随时播放。录制的音频也可以用作有趣的模因、Discord会议中的警报等。
我们还可以使用JavaScript的MediaRecorder API将音频录制功能添加到我们的Web应用程序中。在这里，我们将学习一个逐步指导，讲解如何录制、存储和播放音频。
语法
用户可以按照以下语法使用MediaRecorder API录制和播放音频。
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
audioRecorder = new MediaRecorder(stream);
audioRecorder.start();
audioRecorder.stop();
const blobObj = new Blob(audioChunks, { type: 'audio/webm' });
const audioUrl = URL.createObjectURL(blobObj);
const audio = new Audio(audioUrl);
audio.play();
})
参数和方法解释
Navigator.mediaDevice − mediaDevice对象提供对媒体相关功能（例如音频和视频流）的访问。
getUserMedia() − getUserMedia()方法请求用户对媒体流的权限。它接受包含媒体流类型的对象作为参数。在这里，我们使用{ audio : true }来访问音频流并请求麦克风的权限。
Stream − 我们将其作为回调函数的参数传递，该函数在用户批准权限后获得。
MediaRecorder − 我们可以通过将流变量作为参数传递给MediaRecorder()构造函数来创建一个新的媒体录制器。
Start() − 用于开始录制。
Stop() − 用于停止录制。
Blob() − 用于将音频块转换为Blob对象。
createObjectURL() − 它从Blob对象创建音频URL。
Audio() − 它将音频URL转换为音频。
Play() − 用于播放音频URL。
示例
我们在下面的示例中添加了开始、停止和播放录制按钮。在JavaScript中，我们访问用户设备的媒体流，然后使用媒体流初始化媒体录制器对象。
接下来，我们根据单击的按钮调用方法并将录制器音频存储在“audioChunks”数组中。此外，我们还使用catch()块来捕获录制音频时的错误。
在输出中，用户可以单击“开始录制”按钮开始录制。录制完成后，单击“停止录制”按钮。接下来，单击“播放录制”按钮播放录制的音频。
<html>
<head>
<style>
button {margin: 5px; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer;}
button:hover {background-color: #0056b3;}
div { margin-top: 20px;}
</style>
</head>
<body>
<h3> Using the Media recorder API to record the audio in the web browser </h3>
<div>
<button id = "start"> Start Recording </button>
<button id = "stop"> Stop Recording </button>
<button id = "play"> Play Recorded Audio </button>
</div> <br>
<div id = "output"> </div>
<script>
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const playButton = document.getElementById('play');
let output = document.getElementById('output');
let audioRecorder;
let audioChunks = [];
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
// Initialize the media recorder object
audioRecorder = new MediaRecorder(stream);
// dataavailable event is fired when the recording is stopped
audioRecorder.addEventListener('dataavailable', e => {
audioChunks.push(e.data);
});
// start recording when the start button is clicked
startButton.addEventListener('click', () => {
audioChunks = [];
audioRecorder.start();
output.innerHTML = 'Recording started! Speak now.';
});
// stop recording when the stop button is clicked
stopButton.addEventListener('click', () => {
audioRecorder.stop();
output.innerHTML = 'Recording stopped! Click on the play button to play the recorded audio.';
});
// play the recorded audio when the play button is clicked
playButton.addEventListener('click', () => {
const blobObj = new Blob(audioChunks, { type: 'audio/webm' });
const audioUrl = URL.createObjectURL(blobObj);
const audio = new Audio(audioUrl);
audio.play();
output.innerHTML = 'Playing the recorded audio!';
});
}).catch(err => {
// If the user denies permission to record audio, then display an error.
console.log('Error: ' + err);
});
</script>
</body>
</html>
在本教程中，用户学习了如何使用MediaRecorder API录制媒体。开发人员可以允许用户录制音频并将其存储在本地存储中，以便用户即使在重新加载网页后也可以重复播放录制的音频。
4K+ 次浏览
