react speech highlight demo
1.0.0
Речь React / Vanilla Shight -это мощная библиотека для интеграции текста в речь и слова / предложения в режиме реального времени, выделяющего в ваши веб-приложения. Он поддерживает аудиофайлы , API текста в речь и API синтеза веб-речи , что делает его идеальным для создания интерактивного, доступного и динамического пользовательского опыта.
? Попробуйте демо: отреагировать речь.
Мы поддерживаем реализацию с использованием ванильного JS. Этот пакет имеет размер пакета 45 кб. Вы можете легко объединить эту библиотеку со своим веб -сайтом, возможно, ваш сайт, используя jQuery
Прочитайте api_vanilla.md, чтобы увидеть разные.
Попробуйте демо -ванильную речь
Посмотрите видео на YouTube о реализации ванильной речи для JavaScript Text to To Traking Task.
Построен с Native CLI React. Попробуйте демо -приложение для Android
Вы хотите другую реализацию? Просто спросите меня через Discord: Albirrkarim
Это документация для веб -версии
Оглавление
Недавно я хочу реализовать текст в речь с помощью слова и предложения, которые говорят на моем веб-сайте.
Затем я ищу в Интернете. Но я не могу найти пакет NPM для решения всех задач TTS
Я просто хочу немного мощного пакета, который гибкий и хороший качество голоса.
В целом задача текста к речевым вопросам состоит с проблемами (см. Подробную информацию о проблемах.md), будь то синтез веб -речи или аудиофайл.
Использование веб -речи
У них есть проблемы с роботом, как звук, доступные устройства, доступные и т. Д.
Использование платного API синтеза текста в речь
Когда мы говорим о хорошем звучании / человеческих подобных голосах, моделях ИИ должен принять участие. Так что это не имеет смысла, если делать это на стороне клиента.
Затем провайдер API -поставщика речи, такой как ElevenLabs, Murf AI, Open AI, Amazon Polly и Google Cloud, играют свои роли.
Но они не предоставляют пакет NPM для выделения.
Затем я нашел речиф. Но я не нахожу никаких документов об использовании некоторого пакета NPM, который интегрируется с их сервисом. Также это платные услуги по подписке.
Поиск еще раз, тогда я обнаружил, что одиннадцатилет его бесплатный, если 10000 символ / месяц и сброс в следующем месяце. Круто, верно? Поэтому я решаю использовать это в качестве API речевого синтеза в моем проекте. Эта платформа также не предоставляет пакет React NPM для выделения своего звука, но они предоставляют потоковой выходной аудио, который можно использовать для создания «когда слова говорят в какой -то аудио» (стенограмма времени), как кто -то делает об этой штуке.
В производстве вы должны выполнить расчет затрат , какого поставщика API Service Service вы должны выбрать. Услуги, которые имеют возможности потокового аудио, являются многообещающим словом. но также поставляется с высокой ценой. Дешевый API сервиса TTS обычно не имеет большого количества функций.
ElevenLabs имеют высокий качественный голос и много функций, но когда поступает для производства, они более дорогих сравниваются с открытыми AI TTS, в производстве затраты важны.
Итак, я решаю сделать этот пакет NPM, который сочетает в себе различные методы, которые превзойдут все хорошие вещи и бросают плохие вещи. Вся логика сделана на стороне клиента, посмотрите на обзор выше. Нет необходимости использовать расширенное хостинг бэкэнд.
Мой пакет сочетает в себе встроенный веб -речи и аудиофайл (необязательно) для запуска.
При использовании предпочтения/запасного для аудиофайла вы можете получить высококачественный звук и удалить всю проблему комбинируемости из встроенного веб -речи.
Как вы можете автоматически получить аудиофайл какого -то текста? Вы можете использовать ElevenLabs, Murf AI, Open AI, Amazon Polly и Google Cloud или любой другой API TTS, если они могут создавать аудиофайл (MP3, MP4, WAV и т. Д.) Для получения подробной информации см. Audio_file.md Полем На демонстрационном веб -сайте я даю вам пример, используя ElevenLabs, и даже вы можете попробовать свой собственный аудиофайл в этой демонстрационной сети.
Этот пакет просто принимает входной текст и аудиофайл, поэтому вы можете гибко использовать любой API TTS, который может создавать аудиофайл, дорогой или даже дешевый, когда вы рассматриваете стоимость.
Как этот пакет знает время разговора или предложение воспроизводимого звука? Этот пакет может обнаружить произнесенное слово и предложение на стороне клиента.
Этот пакет - однажды оплата. Нет подписки. Кому нравится подписка? Я тоже этого не делаю. Смотрите, как купить реже.
Когда вы являетесь предпринимателем, я уверен, что у вас есть какой -то сумасшедший случай для этого пакета.
Интерактивный блог
Представьте, что у вас есть длинная статья, и у вас есть кнопка TTS, затем воспроизводили текст к речи, и пользователи могут увидеть, как далеко была прочитана статья. Ваша статья будет готова к SEO, потому что в этом пакете есть возможность рендеринга на стороне сервера (SSR).
Web AI Avatar / NPC
В демонстрации, которую я предоставляю, вы можете увидеть 3D -аватар от readistplayer.me can alive, играя в idle анимацию, и их рот может синхронизироваться с выделенным текстом к речи, потому что этот пакет имеет состояние реагирования, которое представляет текущий разговорную висему. Список Viseme, который я использую в демонстрации, - Oculus OVR Lipsync.
Приложение для изучения языка с настоящим человеческим голосом
Посмотрите на пример 6 на демонстрации. Это пример использования настоящего человеческого голоса для текста к речи. Может быть, ваш местный язык не поддерживается TTS API. Вы можете использовать этот пакет, чтобы использовать настоящий человеческий голос. Настоящий человеческий голос записан настоящим человеком. Настоящий человеческий голос более естественный, чем API TTS.
Академический текстовый читатель
Проблема, когда мы делаем TTS в академическом тексте. Он содержит математические уравнения, формулу, символ, что показанный термин отличается с их провозглашением. Таким образом, мы делаем несколько механизма коррекции вынесения, используя открытый API AI, чтобы подумать, что должен произносить термин.
Основное выделение отношения и выделение уровня слов транскрипта YouTube
У него есть youtube iframe, а транскрипт YouTube справа, когда вы воспроизводите видео на YouTube, будет выделен стенограмма. Выделение основано на текущем времени воспроизводимого видео. Этот пакет следит за временем.
Основная функция Отношения - Когда вы падаете в какое -то слово, связанное слово тоже будет выделено. Пример, когда вы вводите в китайское слово, пинин и английское слово также будет выделено и наоборот. Как это может? видеть.
Видеаплеер с автоматическим генерирующим субтитром
Случай: У вас просто есть аудио или видеофайл без текстовой транскрипта. Наш пакет может генерировать стенограмму из аудиофайла. Или даже проведите стенограмму на другой язык. Подзаголовок можно выделить, когда видео воспроизводится, и, возможно, он хочет показать два разных языковых подзаголовок одновременно. а также выделить оба на основе значения слов.
На этом предварительном видео выше оригинального языка видео на итальянском языке, и я также показываю перевод на английском языке. и система выделяется оба на основе значения.
Итальянское слово bella имеет значение на английском beautiful
Перейдите на эту страницу демонстрации видео.
Ваш вариант использования здесь
Просто спросите меня, что вы хотите сделать, архитектура упаковки масштабируется, чтобы создать различные функции.
См. API.MD и example_code.md, которые содержат простой пример кода.
Полным примером кода и примера реализации является использование исходного кода с демонстрационного веб -сайта. Исходный код демонстрации включен при покупке этого пакета.
Этот пакет написан с помощью TypeScript, вам не нужно читать все документы здесь, потому что этот пакет теперь поддерживает JS DOC и VS Code Intellisense, что это такое? Просто, когда вы падаете свою мышь в какую -то переменную или функцию против кода, покажет некоторое всплывающее окно (простой учебник), о чем функция, примеры, параметры и т. Д.
Просто используйте исходный код с демонстрационного сайта, вы можете буквально просто понять пакет.
ChangeLog содержит информацию о новой функции, повышение точности, исправление ошибки и то, что вы должны делать, когда версия обновляется.
Смотрите Changelog.md
Там нет возврата.
Я люблю отзывы от моих клиентов. Вы можете написать на вкладке «Выпуск», чтобы, когда у меня есть время, я могу попытаться решить это и доставить для следующего обновления.
Все еще волнуйтесь? Смотрите отзывы о производительности
Что ж, мне нужны деньги для финансирования исследования, вы знаете, что создание сложного пакета стоит дорого и, конечно, денег.
Создание двигателей LLM, которые сочетают в себе быстрый инженерный и эффективный алгоритм для экономии открытых затрат AIPI API. Нужно проверить, и тест повторяется, что стоит вызовов API.
Также я предоставляю поддержку через Live Private Catk со мной через Discord (имя пользователя: Albirrkarim), есть ли это какие -либо услуги?
Этот пакет является base пакетом, который можно использовать для различных вариантов использования. Я заработал много денег с пакетом. Предел - ваш навык предпринимательства.
С более высокой ценой я поддерживаю нехватку функциональности.
Расскажите мне свои проблемы или трудности, я покажу вам способ решить это.
Я предоставляю мне поддержку в реальном времени с раздором.
Просто купи это. Удалить головную боль. И вы можете сосредоточиться на своем проекте.
Да, если вы ученик или учитель, вы можете получить скидку. Просто покажите мне свою студенческую открытку или карточку учителя.
Да, если вы поможете мне голосовать по этому пакету на охоте за продуктом
Вы можете увидеть документы в этом репо, и этот пакет написан с помощью TypeScript и протестирован с использованием Jest, чтобы убедиться, что качество.
Вам не нужно читать все документы здесь, потому что этот пакет теперь поддерживает код Intellisense, что это? Просто, когда вы падаете свою мышь в какую -то переменную или функцию против кода, покажет некоторое всплывающее окно (простой учебник), о чем функция, примеры, параметры и т. Д.
Просто используйте исходный код с демонстрационного сайта, вы можете буквально просто понять пакет.
Да, это может, просто спросите чат GPT и объясните свои проблемы.
Пример :
«Мой проект использует WebPack, код использует JSX, я хочу использовать код TSX вместе с JSX, как я могу?»
Goto The Vanilla Speeam
Я делаю демонстрацию для вывода Viseme в консоли. Просто откройте консоль браузера и воспроизводите пример Audio Prefer (английский). И вы увидите слово и Viseme в текущее время сыгранных TTS.
Просто посмотри демо
Попробуйте использовать предпочтение или отступление в аудиофайл см. Audio_file.md
или
Попробуйте установить синтез или язык речи на вашем устройстве.
Если вы используете смартфон (Android):
Убедитесь, что вы устанавливаете распознавание и синтез речи
Если шаг 1 не работает. Попробуйте скачать клавиатуру Google. Затем установление языка диктовки. Подождите несколько минут (ваше устройство автоматически загружает голос), а затем перезапустите свой смартфон.
Ваше устройство сначала загрузит этот голос. Тогда ваше устройство будет иметь этот голос локально.
Попробуйте использовать предпочтение или отступление в аудиофайл см. Audio_file.md
Да, посмотри
Этот пакет необязательно требуется открыть API AI для лучшего выполнения задачи текста в речь (решить много проблем, которые я написал в задачах.md).
Но если вы не хотите использовать Open API AI, он все равно может работать. Видите FAQ о том, какую зависимость использует этот пакет?
Зависимости NPM:
Для реагирования речи: см. Package.json в этом репо. Посмотрите на peerDependencies как только вы создаете этот пакет, вам понадобится только пакет NPM, который находится в этих peerDependencies . Только реагировать.
Для ванильной речи: нет зависимости, просто используйте файл vanilla JS.
Зависимости от ИИ:
Этот пакет необязательно требуется открыть API AI для лучшего выполнения задачи текста в речь (решить много проблем, которые я написал в задачах.md).
При желании используется любой API TTS, который может создавать аудиофайл для лучшего качества звука. Как ElevenLabs, Murf AI, Open AI, Amazon Polly и Google Cloud или любой другой API TTS, если они могут создавать аудиофайл (MP3, MP4, WAV и т. Д.) Для получения подробной информации см. Audio_file.md.
Да, см. Детали на test.md
или вы можете попытаться использовать предпочтение или отступление в аудиофайл см. Audio_file.md
Это просто работает. Простое объяснение во введении выше.
Архитектура масштабируется, просто спросите меня, какую функцию вы хотите.
См. Llm_Engine.md
Нет, потому что мой пакет обрабатывает всю пакетную систему, систему провозглашения и предоставление текста, чтобы API TTS мог создавать аудиофайл, который можно использовать для выделения.
Вы можете просто сделать стратегию кэширования, чтобы кэшировать ответ запроса. Для открытия API AI и TTS API для аудиофайла.
Для отдельного разработчика, фрилансера или малого бизнеса.
Цена составляет 200 долларов США. Слишком дорого? Посмотрите на демонстрационный веб -сайт, может быть, есть скидка для вас или заполните эту форму, которую вы получите, когда есть предложения.
После оплаты вас пригласят в мой личный репозиторий, где у вас будет доступ в течение одного года, включая все обновления в течение этого времени.
Для дальнейшего доступа в последующие годы вы можете заплатить 50 долларов США в год, чтобы остаться в частном репозитории.
Что у тебя есть
Демо -сайт (следующий JS)
Package Repo (React Shight Hight)
Package Repo (Выделка ванильной речи)
Я знаю, что этот пакет сложный, некоторые функции, требующие архитектуры и расширенных навыков программирования для его использования.
Поэтому я делаю несколько полных учебных пособий о том, как использовать такое расширенное оружие.
От установки до примеров передовой реализации и многого другого.
Цена - подписка $ 5 / месяц. (Вскоре)
Для вас это уже имеет бизнес и нужен солидный пакет, который можно использовать в долгосрочной перспективе.
Цена составляет 700 долларов США.
Что у тебя есть
Цена составляет 150 долларов США.
Что у тебя есть
Содержит: выделение транскрипта транскрипта на YouTube, транскрипт видеопогенерации видео, потоковая TTS
Содержит: Backenify LLM -двигатели
React GPT Web Guide ($ 100) + Речь Речь ( 200 долларов ) ($ 50) = 150 долларов
Что у тебя есть
Я принимаю различные способы оплаты:
Спонсоры GitHub
Выберите вкладку «Один раз», выберите опцию и следуйте следующей инструкции из GitHub.
Итак, этот пакет является ответом для вас, который ищет:
