Смена голоса в записи

О чём урок

Прежде чем писать какой-либо код, вызовите навык /text-to-speech, чтобы изучить правильные паттерны ElevenLabs SDK. Защищенная POST-конечная точка, которая принимает записанное в браузере аудио через FormData, преобразует его с помощью speech-to-speech и возвращает преобразованное аудио. Считать ELEVENLABS_API_KEY из process.env. Вернуть 500, если отсутствует. Принимать audio (File), voiceId (string) и опциональный modelId (string, по умолчанию eleven_multilingual_sts_v2) из FormData запроса. Вернуть 400, если audio или voiceId отсутствует. Вызвать elevenlabs.speechToSpeech.convert(voiceId, { audio, modelId, outputFormat: "mp3_44100_128" }). Собрать возвращенный stream в Buffer и ответить с content type audio/mpeg. Обернуть в try/catch и вернуть JSON-ошибку в случае сбоя. Защищенная GET-конечная точка, которая возвращает список доступных голосов. Вызвать elevenlabs.voices.getAll(). Вернуть voices как JSON-массив с полями voiceId, name и previewUrl. Страница изменения голоса с записью в браузере, выбором голоса, преобразованием и воспроизведением аудио. Загрузить голоса из /api/voices при монтировании и заполнить выпадающий список. Голос по умолчанию: JBFqnCBsd6RMkjVDRZzb (George). Четыре состояния UI: бездействие, запись, готовность к преобразованию и преобразование. Запись: использовать navigator.mediaDevices.getUserMedia({ audio: true }) и MediaRecorder (предпочтительный mime type: audio/webm). Показать заметную кнопку "Запись". Во время записи показывать прошедшее время и пульсирующий красный индикатор. Показать кнопку "Стоп" для завершения записи. После остановки создать object URL для исходной записи и отобразить <audio> плеер, чтобы пользователь мог предварительно прослушать ее перед преобразованием. Оставить селектор голоса видимым, но отключенным, пока запись не будет доступна. Включить его после остановки записи. Кнопка "Преобразовать голос" должна оставаться отключенной, пока не будут доступны запись и выбор голоса. При отправке отправить FormData методом POST с записанным аудио как audio, а также voiceId и modelId, на /api/voice-changer. Присвоить записи имя файла, например recording.webm. Показывать индикатор загрузки во время преобразования.

План урока

1. 1. app/api/voice-changer/route.ts
2. 2. app/api/voices/route.ts
3. 3. app/page.tsx