HTML5 기록 시 발생할 수 있는 함정에 대한 자세한 설명

이 글은 주로 HTML5 녹화의 함정 여정에 대한 자세한 설명을 소개합니다. 편집자는 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

솔직히 처음에는 HTML5의 Audio API를 접해본 적이 없었고, 인수하기 전에는 코드를 기반으로 최적화를 해야 했습니다. 물론, 여기에는 많은 함정이 있습니다. 이번에는 이러한 함정에 대한 제 느낌에 대해서도 이야기하겠습니다. (일부 기본 객체의 초기화 및 획득은 이 내용이 이번 주제가 아니기 때문에 생략하겠습니다. 관심 있는 학생들은 MDN을 검색해 보세요. Documents on):

1. 호환을 위해 오디오 API를 호출하는 방법

2. 녹음 소리의 크기를 가져옵니다(주파수여야 함)

3. 녹음 호환성을 일시 중지하는 방법

4. Get 현재 녹음 시간

녹음 전 준비

녹음을 시작하기 전, 현재 기기가 Audio API를 지원하는지 먼저 확인해야 합니다. 이전 메소드 navigator.getUserMedia는 navigator.mediaDevices.getUserMedia로 대체되었습니다. 일반적으로 대부분의 최신 브라우저는 이제 navigator.mediaDevices.getUserMedia의 사용을 지원합니다. 물론 MDN은 호환성 지침도 제공합니다

const promisifiedOldGUM = function(constraints) {
 // First get ahold of getUserMedia, if present
 const getUserMedia =
 navigator.getUserMedia ||
 navigator.webkitGetUserMedia ||
 navigator.mozGetUserMedia;
 
 // Some browsers just don't implement it - return a rejected promise with an error
 // to keep a consistent interface
 if (!getUserMedia) {
 return Promise.reject(
 new Error('getUserMedia is not implemented in this browser')
 );
 }
 
 // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
 return new Promise(function(resolve, reject) {
 getUserMedia.call(navigator, constraints, resolve, reject);
 });
};
 
// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
 navigator.mediaDevices = {};
}
 
// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
 navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}

이 메서드는 비동기식이므로 호환되지 않는 것을 처리할 수 있습니다. 장치에서 친숙한 프롬프트를 제공합니다

navigator.mediaDevices.getUserMedia(constraints).then(
 function(mediaStream) {
 // 成功
 },
 function(error) {
 // 失败
 const { name } = error;
 let errorMessage;
 switch (name) {
 // 用户拒绝
 case 'NotAllowedError':
 case 'PermissionDeniedError':
 errorMessage = '用户已禁止网页调用录音设备';
 break;
 // 没接入录音设备
 case 'NotFoundError':
 case 'DevicesNotFoundError':
 errorMessage = '录音设备未找到';
 break;
 // 其它错误
 case 'NotSupportedError':
 errorMessage = '不支持录音功能';
 break;
 default:
 errorMessage = '录音调用错误';
 window.console.log(error);
 }
 return errorMessage;
 }
);

잘 진행되면 다음 단계로 넘어갈 수 있습니다.

(여기서 컨텍스트를 얻는 방법은 이번에 초점이 아니기 때문에 생략합니다.)

녹화 시작, 녹음 일시 정지

여기서 특별한 점이 있습니다. 즉, 중간 변수를 추가해야 한다는 것입니다. 현재 녹화가 진행 중인지 확인합니다. 파이어폭스 브라우저에서는 문제가 발견됐는데, 녹화 과정이 정상적으로 진행됐으나 일시정지 버튼을 눌렀을 때, 당시에는 연결 끊기 방식을 사용했던 것으로 확인됐습니다. 이 방법은 불가능합니다. 모든 연결을 끊어야 합니다. 나중에 녹음이 현재 진행 중인지 확인하기 위해 중간 변수 this.isRecording을 추가해야 한다는 사실이 발견되었습니다. 시작을 클릭하면 true로 설정되고 일시 중지되면 false로 설정됩니다.

녹음을 시작하면 오디오 프로세스에서 녹음 듣기 이벤트가 발생합니다. true가 반환되면 스트림이 기록됩니다. 그러므로 this.isRecording으로 판단하세요. 거짓이면 바로 return

// 一些初始化
const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(mediaStream);
const scriptNode = audioContext.createScriptProcessor(
 BUFFER_SIZE,
 INPUT_CHANNELS_NUM,
 OUPUT_CHANNELS_NUM
);
sourceNode.connect(this.scriptNode);
scriptNode.connect(this.audioContext.destination);
// 监听录音的过程
scriptNode.onaudioprocess = event => {
 if (!this.isRecording) return; // 判断是否正则录音
 this.buffers.push(event.inputBuffer.getChannelData(0)); // 获取当前频道的数据，并写入数组
};

물론 여기서는 함정이 있을 것입니다. 즉, 현재 녹음 시간을 알아낼 수 있는 방법이 있기 때문입니다. 실제로 실제 일시 중지는 아니지만 스트림에 쓰기만 하면 됩니다. 따라서 현재 녹음 시간도 가져와야 하는데, 이는 공식

const getDuration = () => {
    return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096为一个流的长度，sampleRate 为采样率
}

을 통해 구해야 합니다. 이런 식으로 올바른 녹음 시간을 얻을 수 있습니다.

녹음 종료

녹음을 종료하는 방법은 먼저 일시정지한 후 필요에 따라 청취나 기타 작업을 수행한 다음 스토리지 스트림의 배열 길이를 0으로 설정하는 것입니다.

빈도 가져오기

getVoiceSize = analyser => {
 const dataArray = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(dataArray);
 const data = dataArray.slice(100, 1000);
 const sum = data.reduce((a, b) => a + b);
 return sum;
};

Others

1. HTTPS: Chrome에서 사용하려면 전체 사이트에 HTTPS가 있어야 합니다.

2. WeChat: 사용하려면 WeChat에 내장된 브라우저에서 JSSDK를 호출해야 합니다.

3. 오디오 형식 변환: 찾을 수 있는 대부분의 정보는 기본적으로 서로 복사된 것입니다. 물론 오디오 품질 문제도 있으므로 이에 대해서는 언급하지 않겠습니다. 여기에 자세히 설명되어 있습니다.

결론

이번에 겪은 문제는 대부분 호환성 문제여서 함정에 많이 빠졌는데, 특히 모바일 쪽에서는 초반에 녹음을 받는 방법에 오류가 있었습니다. 지속 시간 문제로 인해 직접적인 중단 상황이 발생합니다. 물론, 가장 중요한 것은 이러한 종류의 기본 API 문서가 MDN을 직접 보면 간단하고 대략적으로 얻을 수 있다는 점을 모든 사람에게 상기시키는 것입니다.

관련 추천:

녹음 관련 추천 글 10개

WeChat에서 개발한 녹음 기능

HTML5 웹페이지 녹음 및 압축 샘플 코드에 대한 자세한 설명

위 내용은 HTML5 기록 시 발생할 수 있는 함정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!