JavaScript es un lenguaje muy flexible y proporciona muchas API para hacer muchas cosas útiles. Aquí una cosa importante es que la grabación de audio o video en las páginas web también se hace usando JavaScript. En este caso, le pedirá al usuario acceso de micrófono al navegador y grabará el audio a través del micrófono y guardará los fragmentos de datos de audio en forma de valor binario en una array y cuando reproduzcamos el audio, recuperaremos los datos y comenzaremos a reproducir. Lo mismo sucede con el video también, cuando hacemos videoconferencias, esto realmente sucede en el servidor, solo que aquí reproducimos el video en la misma página, y en el caso de la videoconferencia, el video se reproducirá en el otro extremo.
Todo esto sucede usando una API, que es la API de MediaRecorder . Esta API proporciona funcionalidad para grabar medios como audio o video. Se crea utilizando el constructor MediaRecorder() .
Aquí usamos una propiedad de JavaScript, que es la propiedad mediaDevices , que se usa para obtener acceso a dispositivos de medios de entrada conectados como micrófonos, cámaras web, etc. Esta propiedad usa un método getUserMedia() para obtener permiso para acceder al micrófono, la cámara web, etc. Este método devuelve una promesa al objeto navegador .
Las Promesas son las siguientes:
Si es verdad:
- resolve : si se logran todos los permisos y el micrófono o la cámara funcionan bien, devuelve un objeto MediaStream . Estos son los principales datos registrados.
Si es falso:
- NotAllowedError: Si el usuario rechaza el permiso para grabar.
- NotFoundError: si no hay ninguna pista multimedia.
- NotReadableError: si no se encuentran los dispositivos de entrada o el hardware no funciona.
- OverconstrainedError: si la configuración de audio de restricción está impidiendo.
- AbortError: si se encuentra una causa genérica desconocida.
- TypeError: If audio: false indicado en el código Javascript.
Ejemplo:
javascript
<!DOCTYPE html>
<html>
<head>
<script>
let audioIN = { audio: true };
// audio is true, for recording
// Access the permission for use
// the microphone
navigator.mediaDevices.getUserMedia(audioIN)
// 'then()' method returns a Promise
.then(function (mediaStreamObj) {
// Connect the media stream to the
// first audio element
let audio = document.querySelector('audio');
//returns the recorded audio via 'audio' tag
// 'srcObject' is a property which
// takes the media object
// This is supported in the newer browsers
if ("srcObject" in audio) {
audio.srcObject = mediaStreamObj;
}
else { // Old version
audio.src = window.URL
.createObjectURL(mediaStreamObj);
}
// It will play the audio
audio.onloadedmetadata = function (ev) {
// Play the audio in the 2nd audio
// element what is being recorded
audio.play();
};
// Start record
let start = document.getElementById('btnStart');
// Stop record
let stop = document.getElementById('btnStop');
// 2nd audio tag for play the audio
let playAudio = document.getElementById('adioPlay');
// This is the main thing to recorded
// the audio 'MediaRecorder' API
let mediaRecorder = new MediaRecorder(mediaStreamObj);
// Pass the audio stream
// Start event
start.addEventListener('click', function (ev) {
mediaRecorder.start();
// console.log(mediaRecorder.state);
})
// Stop event
stop.addEventListener('click', function (ev) {
mediaRecorder.stop();
// console.log(mediaRecorder.state);
});
// If audio data available then push
// it to the chunk array
mediaRecorder.ondataavailable = function (ev) {
dataArray.push(ev.data);
}
// Chunk array to store the audio data
let dataArray = [];
// Convert the audio data in to blob
// after stopping the recording
mediaRecorder.onstop = function (ev) {
// blob of type mp3
let audioData = new Blob(dataArray,
{ 'type': 'audio/mp3;' });
// After fill up the chunk
// array make it empty
dataArray = [];
// Creating audio url with reference
// of created blob named 'audioData'
let audioSrc = window.URL
.createObjectURL(audioData);
// Pass the audio url to the 2nd video tag
playAudio.src = audioSrc;
}
})
// If any error occurs then handles the error
.catch(function (err) {
console.log(err.name, err.message);
});
</script>
</head>
<body style="background-color:rgb(101, 185, 17); ">
<header>
<h1>Record and Play Audio in JavaScript</h1>
</header>
<!--button for 'start recording'-->
<p>
<button id="btnStart">START RECORDING</button>
<button id="btnStop">STOP RECORDING</button>
<!--button for 'stop recording'-->
</p>
<!--for record-->
<audio controls></audio>
<!--'controls' use for add
play, pause, and volume-->
<!--for play the audio-->
<audio id="audioPlay" controls></audio>
</body>
</html>
Producción: 
Publicación traducida automáticamente
Artículo escrito por SoumikMondal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA