Grabación de WeChat
1.Introducir SDK
2. Operación de grabación
Grabación del navegador
Referencias: El front-end H5 implementa la función de llamada y grabación del micrófono_grabación h5_Darker 丨Blog-CSDN de Fengshen
registro de función() {
ventana.navigator.mediaDevices.getUserMedia({
audio: {
sampleRate: 44100, // frecuencia de muestreo
cantidad de canales: 2, // canal
volumen: 2.0 // volumen
}
}).entonces(mediaStream => {
console.log(mediaStream);
ventana.mediaStream = mediaStream
// comenzarRecord(ventana.mediaStream);
}).catch(err => {
// Si la computadora del usuario no tiene un dispositivo de micrófono o el usuario se niega, o hay un problema con la conexión, etc.
// Aquí se lanzarán excepciones y podrás saber qué tipo de error es a través de err.name
consola.error(err);
});
}
función comenzarRecord(mediaStream) {
let audioContext = nuevo (ventana.AudioContext || ventana.webkitAudioContext);
let mediaNode = audioContext.createMediaStreamSource(mediaStream);
consola.log(mediaNode)
ventana.mediaNode = mediaNode
// Se reproducirá automáticamente después de conectarse aquí.
// mediaNode.connect(audioContext.destination); //Reproduce el sonido grabado directamente
//Crea un jsNode
let jsNode = createJSNode(audioContext);
ventana.jsNode = jsNode
// Debes conectarte al altavoz para consumir el OutputBuffer antes de que se pueda activar la devolución de llamada del proceso.
// Y como no hay contenido configurado en el buffer de salida, el altavoz no reproducirá sonido.
jsNode.connect(audioContext.destino);
jsNode.onaudioprocess = onAudioProcess;
// Conecta mediaNode a jsNode
mediaNode.connect(jsNode);
}
función crearJSNode(audioContext) {
constante BUFFER_SIZE = 4096; //4096
constante INPUT_CHANNEL_COUNT = 2;
constante OUTPUT_CHANNEL_COUNT = 2;
// createJavaScriptNode ha quedado obsoleto
let creador = audioContext.createScriptProcessor || audioContext.createJavaScriptNode;
creador = creador.bind(audioContext);
creador de retorno (BUFFER_SIZE,
INPUT_CHANNEL_COUNT, OUTPUT_CHANNEL_COUNT);
}
dejar listaDatosIzquierda = [],
listaDeDatosDerecha = [];
función enProcesoAudio(evento) {
// consola.log(event.inputBuffer);
dejar audioBuffer = event.inputBuffer;
dejar leftChannelData = audioBuffer.getChannelData(0),
rightChannelData = audioBuffer.getChannelData(1);
// console.log(leftChannelData, rightChannelData);
//Necesita clonar
leftDataList.push(leftChannelData.slice(0));
rightDataList.push(rightChannelData.slice(0));
}
función bofangRecord() {
// reproducir grabación
let leftData = mergeArray(leftDataList),
rightData = mergeArray(rightDataList);
let allData = interleaveLeftAndRight(leftData, rightData);
let wavBuffer = createWavFile(allData);
reproducirRecord(wavBuffer);
}
función reproducirRecord(arrayBuffer) {
let blob = new Blob([new Uint8Array(arrayBuffer)]);
let blobUrl = URL.createObjectURL(blob);
document.querySelector('.audio-node').src = blobUrl;
}
función detenerRegistro() {
// Para de grabar
ventana.mediaNode.disconnect();
ventana.jsNode.disconnect();
console.log("Grabación detenida")
// console.log(leftDataList, rightDataList);
}
función cerrar registro() {
// detener el discurso
ventana.mediaStream.getAudioTracks()[0].stop();
console.log("Voz detenida")
}
función fusionarArray(lista) {
let longitud = lista.longitud * lista[0].longitud;
let data = new Float32Array(longitud),
desplazamiento = 0;
for (sea i = 0; i < lista.longitud; i++) {
data.set(lista[i], desplazamiento);
desplazamiento += lista[i].longitud;
}
datos de devolución;
}
función interleaveLeftAndRight (izquierda, derecha) {
// Fusionar los datos de los canales izquierdo y derecho
let longitud total = longitud.izquierda + longitud.derecha;
let datos = new Float32Array(totalLength);
for (sea i = 0; i < longitud.izquierda; i++) {
sea k = i * 2;
datos[k] = izquierda[i];
datos[k + 1] = derecha[i];
}
datos de devolución;
}
función crearWavFile (datos de audio) {
constante WAV_HEAD_SIZE = 44;
let buffer = nuevo ArrayBuffer(audioData.length * 2 + WAV_HEAD_SIZE),
//Necesitamos usar una vista para controlar el buffer
ver = nuevo DataView(búfer);
//Escribe la información del encabezado wav
// descriptor/identificador de fragmento RIFF
writeUTFBytes(vista, 0, 'RIFF');
// longitud del fragmento RIFF
view.setUint32(4, 44 + audioData.length * 2, verdadero);
// tipo RIFF
writeUTFBytes(vista, 8, 'WAVE');
// formato del identificador del fragmento
// subfragmento FMT
writeUTFBytes(vista, 12, 'fmt ');
// formato de longitud del fragmento
view.setUint32(16, 16, verdadero);
// formato de muestra (sin formato)
view.setUint16(20, 1, verdadero);
// estéreo (2 canales)
view.setUint16(22, 2, verdadero);
// frecuencia de muestreo
view.setUint32(24, 44100, verdadero);
// tasa de bytes (frecuencia de muestreo * alineación de bloque)
view.setUint32(28, 44100 * 2, verdadero);
// alineación de bloques (recuento de canales * bytes por muestra)
view.setUint16(32, 2 * 2, verdadero);
// bits por muestra
view.setUint16(34, 16, verdadero);
// subfragmento de datos
// identificador de fragmento de datos
writeUTFBytes(vista, 36, 'datos');
// longitud del fragmento de datos
view.setUint32(40, audioData.length * 2, verdadero);
//Escribe el encabezado wav, el código es el mismo que el anterior
//Escribir datos PCM
let longitud = audioData.length;
sea índice = 44;
sea volumen = 1;
for (sea i = 0; i < longitud; i++) {
view.setInt16(índice, audioData[i] * (0x7FFF * volumen), verdadero);
índice += 2;
}
búfer de retorno;
}
función writeUTFBytes(vista, desplazamiento, cadena) {
var lng = cadena.longitud;
para (var i = 0; i < lng; i++) {
view.setUint8(desplazamiento + i, string.charCodeAt(i));
}
}
-
Reproducir grabación
1. Usa la etiqueta de audio
< audio src ='audio_file.mp3'></ audio >
2. Usar objeto de audio (uni-app)
3. Objeto del navegador (js)
var mp3 = nulo;
función reproducción de audio(url){
console.log("Reproducir grabación---"+url);
si(mp3 != nulo){
mp3.pausa();
mp3 = nuevo Audio(url);
mp3.play();
}demás{
mp3 = nuevo Audio(url);
mp3.play(); //Reproduce el objeto de audio mp3
}
}