在本文中我们将研究以下主题
我们将从创建 React hook 开始，它将执行所有操作，例如 startRecording、stopRecording、创建 Audio Blob、错误处理等。
在我们进入正题之前，还有一些其他事情需要注意
const VOICE_MIN_DECIBELS = -35 const DELAY_BETWEEN_DIALOGUE = 2000
让我们将我们的钩子命名为useAudioInput.ts，我们将使用浏览器api，如navigator.mediaDevices.getUserMedia、MediaRecorder和AudioContext。 AudioContext 将帮助我们识别输入音频是否高于被视为输入所需的最小分贝，因此我们将从以下变量和道具开始
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)
}
...
}
在上面的代码中，我们将使用 mediaChunks 作为变量来保存输入 blob 和 mediaRecorder 来拥有新 MediaRecorder 的实例，该实例将流作为来自 navigator.mediaDevices.getUserMedia 的输入。接下来让我们处理 getUserMedia 不可用的情况
...
useEffect(() => {
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
const notAvailable = new Error('Your browser does not support Audio Input')
setError(notAvailable)
}
},[]);
...
我们将开始编写钩子的实际功能，其中包括各种函数，如 setupMediaRecorder、setupAudioContext、onRecordingStart、onRecordingActive、startRecording、stopRecording 等。
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?.();
通过上面的代码，我们已经差不多完成了钩子，唯一悬而未决的事情是识别用户是否已经停止说话，如果没有输入 2，我们将使用 DELAY_BETWEEN_DIALOGUE 作为等待的时间秒后，我们将假设用户已停止讲话并将点击语音转文本端点。
...
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()
...
}
在上面的代码中，我们使用 requestAnimationFrame 来检测用户音频输入，这样我们就完成了钩子，现在可以开始在各个地方使用钩子了。
例如
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
})
第二部分是连接一个节点服务器，它可以与谷歌语音到文本 API 进行通信，我已经附上了我在创建节点方面时引用的文档。
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!');
});
在本文中，我介绍了如何将音频内容或 blob 发送到 google 语音转文本端点，我们还可以发送 blob uri 而不是内容，唯一的变化是有效负载
// sending url as part of audio object to speech to text api
...
audio: {url: audioUrl} or audio: {content: audioBlob}
...
与本文相关的代码存在于 Github 中。
以上是通过 Google Speech to Text 进行音频转文本输入的详细内容。更多信息请关注PHP中文网其他相关文章！
