Dalam artikel ini kita akan melihat topik berikut

1. navigator.mediaDevices.getUserMedia pelayar Api
2. pertuturan google untuk menghantar teks kepada Api

kita akan mulakan dengan mencipta react hook yang akan melakukan semua perkara seperti startRecording, stopRecording, mencipta Audio Blob, pengendalian ralat dll.

Ada beberapa perkara lain yang perlu dijaga sebelum kita masuk ke dalam daging mata kail

1. Desibel minimum di atas yang kami akan pertimbangkan dialog sebagai input cth -35db (hanya nombor rawak)
2. Berapa lama jeda yang sepatutnya menunjukkan bahawa pengguna telah menghentikan input cth 2000ms

const VOICE_MIN_DECIBELS = -35
const DELAY_BETWEEN_DIALOGUE = 2000

Mari namakan cangkuk kami sebagai useAudioInput.ts kami akan menggunakan apis penyemak imbas seperti navigator.mediaDevices.getUserMedia, MediaRecorder dan AudioContext. AudioContext akan membantu kami mengenal pasti sama ada audio input lebih tinggi daripada desibel minimum yang diperlukan untuk dianggap sebagai input, jadi kami akan mulakan dengan pembolehubah dan prop berikut

const defaultConfig = {
    audio: true
};

type Payload = Blob;

type Config = {
    audio: boolean;
    timeSlice?: number
    timeInMillisToStopRecording?: number
    onStop: () => void;
    onDataReceived: (payload: Payload) => void
};

export const useAudioInput = (config: Config = defaultConfig) => {
    const mediaChunks = useRef<Blob[]>([]);
    const [isRecording, setIsRecording] = useState(false);
    const mediaRecorder = useRef<MediaRecorder | null>(null);
    const [error, setError] = useState<Error| null>(null);
    let requestId: number;
    let timer: ReturnType<typeof setTimeout>;

    const createBlob = () => {
      const [chunk] = mediaChunks.current;
      const blobProperty = { type: chunk.type };
      return new Blob(mediaChunks.current, blobProperty)
    }
  ...
}

Dalam kod di atas, kami akan menggunakan mediaChunks sebagai pembolehubah untuk menahan gumpalan input dan mediaRecorder untuk mempunyai contoh MediaRecorder baharu yang mengambil strim sebagai input daripada navigator.mediaDevices.getUserMedia. Seterusnya, mari uruskan kes di mana getUserMedia tidak tersedia

...
useEffect(() => {
        if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            const notAvailable = new Error('Your browser does not support Audio Input')
            setError(notAvailable)
        }

    },[]);
...

kami akan mula menulis kefungsian sebenar cangkuk yang akan terdiri daripada pelbagai fungsi seperti setupMediaRecorder, setupAudioContext, onRecordingStart, onRecordingActive, startRecording, stopRecording dll.

const onRecordingStart = () => mediaChunks.current = [];

const onRecordingActive = useCallback(({data}: BlobEvent) => {
        if(data) {
            mediaChunks.current.push(data);
            config?.onDataReceived?.(createBlob())
        }
    },[config]);

const startTimer = () => {
        timer = setTimeout(() => {
            stopRecording();
        }, config.timeInMillisToStopRecording)
    };

const setupMediaRecorder = ({stream}:{stream: MediaStream}) => {
        mediaRecorder.current = new MediaRecorder(stream)
        mediaRecorder.current.ondataavailable = onRecordingActive
        mediaRecorder.current.onstop = onRecordingStop
        mediaRecorder.current.onstart = onRecordingStart
        mediaRecorder.current.start(config.timeSlice)

    };

 const setupAudioContext = ({stream}:{stream: MediaStream}) => {
        const audioContext = new AudioContext();
        const audioStreamSource = audioContext.createMediaStreamSource(stream);
        const analyser = audioContext.createAnalyser();

        analyser.minDecibels = VOICE_MIN_DECIBELS;

        audioStreamSource.connect(analyser);
        const bufferLength = analyser.frequencyBinCount;
        const domainData = new Uint8Array(bufferLength)

        return {
            domainData,
            bufferLength,
            analyser
        }
    };

const startRecording = async () => {
        setIsRecording(true);

        await navigator.mediaDevices
            .getUserMedia({
                audio: config.audio
            })
            .then((stream) => {
                setupMediaRecorder({stream});
                if(config.timeSlice) {
                    const { domainData, analyser, bufferLength } = setupAudioContext({ stream });
                    startTimer()
                }
            })
            .catch(e => {
                setError(e);
                setIsRecording(false)
            })
    };



    const stopRecording = () => {
        mediaRecorder.current?.stop();

        clearTimeout(timer);
        window.cancelAnimationFrame(requestId);

        setIsRecording(false);
        onRecordingStop()
    };

    const createBlob = () => {
        const [chunk] = mediaChunks.current;
        const blobProperty = { type: chunk.type };
        return new Blob(mediaChunks.current, blobProperty)
    }

    const onRecordingStop = () => config?.onStop?.();

dengan kod di atas kami hampir selesai dengan cangkuk, satu-satunya perkara yang belum selesai adalah untuk mengenal pasti sama ada pengguna telah berhenti bercakap atau tidak, kami akan menggunakan DELAY_BETWEEN_DIALOGUE sebagai masa yang kami akan tunggu, jika tiada input untuk 2 saat kami akan menganggap bahawa pengguna telah berhenti bercakap dan akan menekan pertuturan ke titik akhir teks.

...
const detectSound = ({ 
        recording,
        analyser,
        bufferLength,
        domainData
    }: {
        recording: boolean
        analyser: AnalyserNode
        bufferLength: number
        domainData: Uint8Array
    }) => {
        let lastDetectedTime = performance.now();
        let anySoundDetected = false;

        const compute = () => {
            if (!recording) {
                return;
            }

            const currentTime = performance.now();

            const timeBetweenTwoDialog =
                anySoundDetected === true && currentTime - lastDetectedTime > DELAY_BETWEEN_DIALOGUE;

            if (timeBetweenTwoDialog) {
                stopRecording();

                return;
            }

            analyser.getByteFrequencyData(domainData);

            for (let i = 0; i < bufferLength; i += 1) {
                if (domainData[i] > 0) {
                    anySoundDetected = true;
                    lastDetectedTime = performance.now();
                }
            }

            requestId = window.requestAnimationFrame(compute);
        };

        compute();

    }
...

const startRecording = async () => {
 ... 
  detectSound()
 ... 
}

dalam kod di atas kami menggunakan requestAnimationFrame untuk mengesan input audio pengguna, dengan ini kami selesai dengan cangkuk dan kini boleh mula menggunakan cangkuk di pelbagai tempat.

cth

  const onDataReceived = async (data: BodyInit) => {
    const rawResponse = await fetch('https://backend-endpoint', {
      method: 'POST',
      body: data
    });
    const response = await rawResponse.json();

    setText(response)
  };

  const { isRecording, startRecording, error } = useAudioInput({
    audio: true,
    timeInMillisToStopRecording: 2000,
    timeSlice: 400,
    onDataReceived
  })

Bahagian kedua adalah untuk menyambung pelayan nod yang boleh berkomunikasi dengan ucapan google ke teks api, saya telah melampirkan dokumentasi yang saya rujuk semasa mencipta bahagian nod sesuatu.
https://codelabs.developers.google.com/codelabs/cloud-speech-text-node.

// demo node server which connects with google speech to text api endpoint

const express = require('express');
const cors = require('cors');

const speech = require('@google-cloud/speech');

const client = new speech.SpeechClient();

async function convert(audioBlob) {
  const request = {
    config: {
      encoding: 'WEBM_OPUS', // Ensure this matches the format of the audio being sent
      sampleRateHertz: 48000, // This should match the sample rate of your recording
      languageCode: 'en-US'
    },
    audio: {
      content: audioBlob
    }
  };

  const [response] = await client.recognize(request);

  const transcription = response.results
    .map(result => result.alternatives[0].transcript)
    .join('\n');
  return transcription;
}

const app = express();

app.use(cors())
app.use(express.json());

app.post('/upload', express.raw({ type: '*/*' }), async (req, res) => {
    const audioBlob = req.body;

    const response = await convert(audioBlob);

    res.json(response);
});

app.listen(4000,'0.0.0.0', () => {
  console.log('Example app listening on port 4000!');
});

dalam artikel ini saya telah membincangkan penghantaran kandungan audio atau gumpalan ke pertuturan google ke titik akhir teks, kami juga boleh menghantar uri gumpalan dan bukannya kandungan, satu-satunya perubahan ialah muatan

// sending url as part of audio object to speech to text api 
...
audio: {url: audioUrl} or audio: {content: audioBlob}
...

Kod yang berkaitan dengan artikel terdapat dalam Github.

Atas ialah kandungan terperinci Input Audio ke Teks melalui Google Speech to Text. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!