녹음 된 Blob 스트림을 JavaScript를 사용하여 여러 5 초 WAV 파일로 분할하고 정상적으로 재생되는 방법은 무엇입니까?

JavaScript를 사용하여 기록 된 Blob 스트림을 분할하고 5 초 웨이브 파일을 생성하십시오.

React-MIC를 사용하여 녹음 할 때 요구 사항이 있습니다. 녹음 된 Blob 스트림을 여러 5 초 WAV 파일로 분할해야합니다. 그러나 시도한 후 첫 번째 분할 wav 파일 만 정상적으로 재생할 수 있고 나머지 파일은 손상되도록한다는 것을 알았습니다.

프론트 엔드 에서이 요구 사항을 구현할 때, 우리는 주로 두 가지 과제에 직면 해 있습니다. 하나는 Blob 스트림을 올바르게 분할하는 방법이며, 다른 하나는 각 세그먼트 클립이 올바르게 생성하고 파일을 재생할 수 있도록하는 방법입니다. 다음은 코드 예제 및 솔루션입니다.

 import React, {useref, usestate} 'react'
'react-mic'에서 {reactmic, reactmicstopevent} import
'antd'에서 {button} 가져 오기

const audiorecorder = () => {
    const [record, setRecord] = usestate (false)
    const resref = useref <blob> ([])
    const audiochunksref = useref <blob> ([])
    const intercalref = useref <nodejs.timer null> (null)
    const firstBlob = useref <blob> (정의되지 않은)

    const createwavheader = (numchannels, samplerate, bytelength) => {
        const 헤더 = New Arraybuffer (44);
        const view = 새 데이터 뷰 (헤더);

        view.setuint32 (0, 1380533830, false); // "리프"
        view.setuint32 (4, bytelength 36, false);
        view.setuint32 (8, 1718449184, false); // "파도"
        view.setuint32 (12, 1684108385, false); // "FMT"
        view.setuint32 (16, 16, true); // PCM의 경우 16
        view.setuint16 (20, 1, true); // pcm
        view.setuint16 (22, numchannels, true);
        view.setuint32 (24, samplerate, true);
        view.setuint32 (28, 샘플 리테이션 * numchannels * 2, true);
        view.setuint16 (32, numchannels * 2, true);
        view.setuint16 (34, 16, true); // 16 비트
        view.setuint32 (36, 1684108385, false); // "데이터"
        view.setuint32 (40, bytelength, true);

        리턴 헤더;
    };

    const savefile = async () => {
        const chunkslist = resref.current;
        for (i = 0; i <chunkslist.length i const audiobuffer="new" uint8array .arraybuffer createwavheader audiobuffer.length wavblob="new" blob : url="url.createobjecturl" a="document.createelement" a.href="URL;" a.download="`녹음" .wav a.click url.revokeobjecturl startrecording="()"> {
        setRecord (true)
        AudioChunksRef.current = [] // 이전 녹화 데이터를 지우십시오. // 녹음 intervalRef.current = setInterVal (() => {
            const curblob = new Blob (AudioChunksRef.current, {type : 'Audio/Wav'})
            const startIndex = AudioChunkSref.current.indexof (FirstBlob.current as blob)
            const blob = curblob.slice (startIndex === -1? 0 : startIndex, -1, 'Audio/Wav')
            FirstBlob.current = AudioChunksRef.current.at (-1)
            // 현재 녹화 데이터 콘솔 처리.
            resref.current.push (blob)
        }, 5000)
    }

    const stoprecording = () => {
        setRecord (false)
        intervalref.current && clearinterval (intervalref.current) // 클리어 타이머}

    const ondata = (RecordedBlob : blob) => {
        AudioChunkSref.current.push (RecordedBlob) // 레코드 데이터 저장}}

    const onstop = (RecordedBlob : ReactMicStopevent) => {
        Console.log ( '기록 완료 :', RecordedBlob)
    }

    const savefile1 = () => {
        const chunkslist = resref.current
        chunkslist.map (async (v, i) => {
            const filename = 'aaa.wav'
            const 파일 : 파일 = 새 파일 ([v], filename, {type : 'audio/wav'})
            const filesize = file.size

            Console.log ( 'Filesize', Filesize)
            // 다운로드 링크 작성 const url = url.createobjecturl (파일)
            const a = document.createelement ( 'a')
            a.href = url
            a.download =`recording $ {i} .wav` // 다운로드 파일의 이름 설정 a.click () // 트리거 다운로드 // release url resource url.revokeobjecturl (url)
        })
    }

    const savefinalresult = () => {
        const filename = 'aaa.wav'
        const 파일 : file = 새 파일 (AudioChunkSref.current, filename, {type : 'audio/wav'})
        const filesize = file.size

        Console.log ( 'Filesize', Filesize)
        // 다운로드 링크 작성 const url = url.createobjecturl (파일)
        const a = document.createelement ( 'a')
        a.href = url
        a.download =`recording $ {date.now ()}. wav` // 다운로드 파일의 이름을 설정합니다.
    }

    반품 (
        <div>
            <reftmic record="{record}" onstop="{onstop}" ondata="{ondata}" mimetype="Audio /Wav"></reftmic>
             녹화 시작 
             녹음 중지 
             다운로드 
             다운로드 Final 
        </div>
    ))
}

기본 audiorecorder를 내보내십시오</chunkslist.length></blob></nodejs.timer></blob></blob>

Blob 스트림을 분할하고 WAV 파일을 생성하는 과정에서 WAV 헤더 정보를 수동으로 추가하면 문제가 해결되지 않는 것으로 나타났습니다. 그 이유는 WAV 파일의 구조가 비교적 엄격하기 때문입니다. 분할 후 헤더 정보가 올바르게 추가되지 않으면 파일이 손상 될 수 있습니다.

이 문제를 해결하기위한 한 가지 제안은 브라우저에서 실행할 수있는 오디오 및 비디오 처리 라이브러리 인 FFMPEG의 WASM 버전을 사용하는 것입니다. 이를 통해 오디오를 쉽게 분할하고 올바른 WAV 파일 형식을 생성 할 수 있습니다. 이 기능을 구현하기 위해 FFMPEG.wasm 프로젝트를 사용하는 것을 고려할 수 있습니다.

위 내용은 녹음 된 Blob 스트림을 JavaScript를 사용하여 여러 5 초 WAV 파일로 분할하고 정상적으로 재생되는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!