Page History
...
- OpenAPI의 TTS는 mp3로 반환하며~ 순수웹에서 스트리밍 재생하려면 PCM형태의 스트림 데이터 변환이 필요합니다필요하며 서버에서 변환합니다.
웹에서의 재생
| Code Block | ||
|---|---|---|
| ||
async function playAudioBytes(audioBytes, playbackRate, type, dotNetRef) {
try {
if (!audioContext || audioContext.state === 'closed') {
audioContext = new AudioContext();
}
// Float32Array로 변환된 PCM 데이터 사용
const float32Array = new Float32Array(audioBytes);
// AudioBuffer 생성
const audioBuffer = audioContext.createBuffer(1, float32Array.length, audioContext.sampleRate);
audioBuffer.copyToChannel(float32Array, 0);
// 재생
const bufferSource = audioContext.createBufferSource();
bufferSource.buffer = audioBuffer;
bufferSource.playbackRate.value = playbackRate; // 재생 속도 설정
bufferSource.connect(audioContext.destination);
// 재생 완료 이벤트 핸들러 추가
bufferSource.onended = () => {
// 타입에 따라 추가 작업 수행
console.log(`오디오 재생 완료 재생 타입: ${type}`);
if (type === 1) {
console.log("Type 1: 휴먼요청 재생완료~ LLM응답재생 요청");
if (dotNetRef && typeof dotNetRef.invokeMethodAsync === "function") {
dotNetRef.invokeMethodAsync("OnAudioPlaybackCompleted", 1)
.catch(err => console.error("Blazor 메서드 호출 OnAudioPlaybackCompleted 중 오류 발생:", err));
}
} else if (type === 2) {
console.log("Type 2: AI재생완료");
} else if (type === 3) {
console.log("Type 3: 사용자 정의 작업");
}
};
bufferSource.start();
} catch (err) {
console.error("오디오 재생 중 오류 발생:", err);
}
} |
...