О чём урок
Прежде чем писать какой-либо код, вызовите навык /text-to-speech, чтобы изучить правильные паттерны ElevenLabs SDK. Защищенная POST-конечная точка, которая принимает загрузку FormData с аудиофайлом и возвращает аудио с выделенным голосом. Считайте ELEVENLABS_API_KEY из process.env. Верните 500, если отсутствует. Примите audio (File) из FormData запроса. Верните 400, если отсутствует. Вызовите elevenlabs.audioIsolation.convert({ audio }). Соберите возвращенный поток в Buffer и ответьте с типом контента audio/mpeg. Оберните в try/catch и верните JSON-ошибку в случае сбоя. Страница выделения голоса с записью, выделением и воспроизведением в браузере. Три состояния: бездействие, запись и обработка. Запись: используйте navigator.mediaDevices.getUserMedia({ audio: true }) и MediaRecorder (предпочтительный тип MIME audio/webm). Покажите заметную кнопку "Запись". Во время записи покажите прошедшее время и пульсирующий красный индикатор. Покажите кнопку "Стоп" для завершения записи. После остановки покажите исходную запись в проигрывателе <audio> и активируйте кнопку "Выделить голос". Обработка: Отправьте FormData методом POST с записанным блобом как audio на /api/isolate. Покажите индикатор загрузки. Результат: при успешном выполнении создайте URL-объект из блоба ответа и отобразите второй проигрыватель <audio> с меткой "Выделенное аудио" и элементами управления. Покажите ссылку "Скачать" для выделенного файла. Покажите кнопку "Записать снова" для сброса и начала заново. Отображайте ошибки непосредственно в тексте. Корректно обрабатывайте отказ в разрешении на использование микрофона.
План урока
- 1. app/api/isolate/route.ts
- 2. app/page.tsx
Урок входит в полный доступ. Полный текст и видео открываются после оплаты. Первые уроки каждого курса бесплатны.