react speech highlight demo
1.0.0
Sorotan Pidato React / Vanilla adalah perpustakaan yang kuat untuk mengintegrasikan kata-ke-kata dan kata-kata real-time / kalimat yang menyorot ke dalam aplikasi web Anda. Ini mendukung file audio , API Text-to-Speech , dan API Sintesis Pidato Web , menjadikannya ideal untuk menciptakan pengalaman pengguna yang interaktif, mudah diakses, dan dinamis.
? Coba Demo: Sorotan Pidato Bereaksi
Kami mendukung implementasi menggunakan Vanilla JS. Paket ini memiliki ukuran bundel 45 kb. Anda dapat dengan mudah menggabungkan perpustakaan ini dengan situs web Anda, mungkin situs web Anda menggunakan jQuery
Baca api_vanilla.md untuk melihat perbedaannya.
Coba sorotan pidato vanilla demo
Tonton Video YouTube tentang implementasi sorotan pidato vanilla untuk tugas JavaScript untuk tugas bicara.
Dibangun dengan CLI Native React. Coba Demo Android App
Apakah Anda ingin implementasi lain? Tanyakan saja padaku melalui Perselisihan: Albirrkarim
Ini adalah dokumentasi untuk versi web
Daftar isi
Baru-baru ini, saya ingin mengimplementasikan teks-ke-speech dengan menyorot kata dan kalimat yang diucapkan di situs web saya.
Lalu saya mencari di internet. Tapi saya tidak dapat menemukan paket NPM untuk menyelesaikan semua masalah TTS
Saya hanya ingin beberapa paket kuat yang kualitas suara yang fleksibel dan bagus.
Secara keseluruhan tugas teks ke bicara hadir dengan masalah (lihat detail tentang masalah.md) apakah menggunakan sintesis pidato web atau file audio.
Menggunakan Web Speechsynthesis
Mereka memiliki masalah robot seperti suara, perangkat yang didukung tersedia, dll.
Menggunakan API Sintesis Teks-ke-Speech Berbayar
Ketika kita berbicara tentang suara yang baik / manusia seperti suara AI Inference harus terlibat. Jadi tidak masuk akal jika melakukan itu di sisi klien.
Kemudian penyedia API sintesis pidato seperti Elevenlabs, Murf AI, Open AI, Amazon Polly, dan Google Cloud memainkan peran mereka.
Tetapi mereka tidak menyediakan paket NPM untuk melakukan sorotan.
Kemudian saya menemukan Pidato. Tetapi saya tidak menemukan dokumen tentang menggunakan beberapa paket NPM yang terintegrasi dengan layanan mereka. Ini juga layanan langganan berbayar.
Mencari lagi, lalu saya menemukan ElevenLab gratis jika karakter / bulan 100.000 dan akan direset pada bulan depan. Keren kan? Jadi saya memutuskan untuk menggunakan ini sebagai API sintesis ucapan dalam proyek saya. Platform ini juga tidak menyediakan paket React NPM untuk menyoroti audio mereka, tetapi mereka menyediakan audio output streaming yang dapat digunakan untuk menghasilkan "ketika kata -kata diucapkan dalam beberapa audio" (cap waktu) seperti yang dibuat seseorang tentang hal ini.
Dalam produksi Anda harus melakukan perhitungan biaya , penyedia API layanan TTS mana yang harus Anda pilih. Layanan yang memiliki audio streaming kemampuan menjanjikan kata sorotan. tetapi juga datang dengan harga tinggi. API layanan TTS murah biasanya tidak memiliki banyak fitur.
Elevenlab telah menghasilkan suara berkualitas baik dan banyak fitur, tetapi ketika datang untuk produksi mereka lebih mahal membandingkan dengan AI TTS terbuka, dalam produksi biayanya adalah masalah penting.
Jadi, saya memutuskan untuk membuat paket NPM ini yang menggabungkan berbagai metode di atas untuk mencapai semua hal baik dan melemparkan hal -hal buruk. Semua logika dilakukan di sisi klien, lihat ikhtisar di atas. Tidak perlu menggunakan hosting backend canggih.
Paket saya menggabungkan built in web speechsynthesis dan file audio (opsional) untuk dijalankan.
Saat menggunakan file preferensi/fallback ke audio, Anda dapat mencapai suara berkualitas tinggi dan menghapus semua masalah kompak dari built in web speechsynthesis.
Bagaimana Anda bisa secara otomatis mendapatkan file audio dari beberapa teks? Anda dapat menggunakan ElevenLabs, Murf AI, Open AI, Amazon Polly, dan Google Cloud atau API TTS lainnya selama mereka dapat menghasilkan file audio (mp3, mp4, wav, dll ...) untuk detailnya lihat audio_file.md . Di situs web demo saya memberikan contoh Anda menggunakan ElevenLabs dan bahkan Anda dapat mencoba file audio Anda sendiri di web demo itu.
Paket ini hanya mengambil file teks dan audio input, sehingga Anda dapat fleksibel untuk menggunakan API TTS apa pun yang dapat menghasilkan file audio, yang mahal atau bahkan murah ketika Anda mempertimbangkan biayanya.
Bagaimana paket ini mengetahui waktu yang diucapkan kata atau kalimat audio yang dimainkan? Paket ini dapat mendeteksi kata dan kalimat yang diucapkan di sisi klien.
Paket ini adalah pembayaran satu kali. Tidak ada langganan. Siapa yang suka berlangganan? Saya juga tidak. Lihat cara membeli di bawah.
Ketika Anda adalah pengusaha, saya yakin Anda memiliki beberapa kasus penggunaan gila untuk paket ini.
Blog Interaktif
Bayangkan Anda memiliki artikel panjang dan memiliki tombol TTS kemudian memutar teks untuk berbicara dan pengguna dapat melihat seberapa jauh artikel telah dibaca. Artikel Anda akan siap SEO karena paket ini memiliki kemampuan server rendering (SSR).
Web AI Avatar / NPC
Dalam demo yang saya berikan, Anda dapat melihat avatar 3D dari ReadyPlayer.me dapat hidup memainkan animasi idle dan mulut mereka dapat disinkronkan dengan teks yang disorot untuk diucapkan, karena paket ini bereaksi yang mewakili viseme lisan saat ini. Daftar Viseme yang saya gunakan dalam demo adalah Oculus OVR Lipsync.
Aplikasi Pembelajaran Bahasa dengan Suara Manusia Nyata
Lihatlah Contoh 6 pada demo. Ini adalah contoh penggunaan suara manusia nyata untuk teks untuk diucapkan. Mungkin bahasa lokal Anda tidak didukung oleh API TTS. Anda dapat menggunakan paket ini untuk menggunakan suara manusia yang sebenarnya. Suara manusia yang sebenarnya direkam oleh manusia sejati. Suara manusia yang sebenarnya lebih alami daripada API TTS.
Pembaca Teks Akademik
Masalah ketika kita melakukan TTS pada teks akademik. Ini berisi persamaan matematika, rumus, simbol bahwa istilah yang ditampilkan berbeda dengan pengucapannya lihat. Jadi kami membuat mesin koreksi pengumuman menggunakan AI AI terbuka untuk memikirkan apa yang harus diucapkan istilah.
Sorotan relasi dan penyorotan level kata dari transkrip YouTube
Ini memiliki iframe YouTube, dan transkrip YouTube di sebelah kanan, saat Anda memutar video YouTube, transkrip akan disorot. Sorotan didasarkan pada waktu saat ini dari video yang diputar. Paket ini mengikuti waktu.
Fitur Sorotan Relasi - Ketika Anda melayang ke beberapa kata, kata terkait akan disorot juga. Contoh ketika Anda melayang ke kata Cina, kata pinyin dan bahasa Inggris akan disorot juga dan sebaliknya. Bagaimana bisa? melihat.
Pemutar video dengan Auto menghasilkan subtitle
CASE: Anda hanya memiliki file audio atau video tanpa transkrip teks. Paket kami dapat menghasilkan transkrip dari file audio. atau bahkan menggores transkrip ke bahasa lain. Subtitle dapat disorot saat video diputar, dan mungkin ingin menampilkan dua subtitle bahasa yang berbeda sekaligus. dan juga menyoroti keduanya berdasarkan arti kata -kata.
Pada video pratinjau di atas video asli bahasa Italia, dan saya juga menunjukkan terjemahan dalam bahasa Inggris. dan sistem disorot baik berdasarkan artinya.
Kata Italia bella memiliki makna dalam bahasa Inggris beautiful
Buka halaman Demo Video ini.
Kasus penggunaan Anda di sini
Tanyakan saja kepada saya apa yang ingin Anda buat, arsitektur paket dapat diskalakan untuk membuat berbagai fitur.
Lihat API.MD dan example_code.md yang berisi kode contoh sederhana.
Contoh kode lengkap dan contoh implementasi adalah menggunakan kode sumber dari situs web demo. Sumber Sumber Situs Web Demo disertakan saat Anda membeli paket ini.
Paket ini ditulis dengan TypeScript, Anda tidak perlu membaca semua dokumen di sini, karena paket ini sekarang mendukung JS Doc dan VS Code IntelliSense apa itu? Cukup ketika Anda mengarahkan mouse Anda ke beberapa variabel atau fungsi vs kode akan menampilkan beberapa popup (tutorial sederhana) apa fungsinya, contoh, param, dll ...
Cukup gunakan kode sumber dari situs web demo, Anda benar -benar dapat memahami paketnya.
Changelog berisi informasi tentang fitur baru, meningkatkan akurasi, memperbaiki bug, dan apa yang harus Anda lakukan saat versi diperbarui.
Lihat Changelog.MD
Tidak ada pengembalian dana.
Saya suka umpan balik dari pelanggan saya. Anda dapat menulis di tab Masalah jadi ketika saya punya waktu, saya dapat mencoba menyelesaikannya dan mengirimkannya untuk pembaruan berikutnya.
Masih khawatir? Lihat ulasan tentang ProductThunt
Yah, saya butuh uang untuk mendanai penelitian, Anda tahu bahwa membuat paket yang kompleks menghabiskan banyak waktu dan tentu saja uang.
Membuat mesin LLM yang menggabungkan rekayasa cepat dan algoritma yang efisien untuk menghemat biaya API AI terbuka. Perlu diuji dan tesnya berulang kali dengan biaya panggilan API.
Saya juga memberikan dukungan melalui obrolan pribadi langsung kepada saya melalui Discord (nama pengguna: Albirrkarim), apakah ada layanan di luar sana yang melakukan itu?
Paket ini adalah paket base yang dapat digunakan untuk berbagai kasus penggunaan. Saya menghasilkan banyak uang dengan paket. Batasnya adalah keterampilan kewirausahaan Anda.
Dengan harga yang lebih tinggi saya mempertahankan kelangkaan fungsionalitas.
Ceritakan masalah atau kesulitan Anda kepada saya, saya akan menunjukkan cara untuk menyelesaikannya.
Saya memberikan dukungan realtime dari saya dengan perselisihan.
Beli saja. Lepaskan sakit kepala. Dan Anda dapat fokus pada proyek Anda.
Ya, jika Anda mahasiswa atau guru, Anda bisa mendapatkan diskon. Tunjukkan saja kartu siswa atau kartu guru Anda.
Ya, jika Anda membantu saya memilih paket ini pada perburuan produk
Anda dapat melihat dokumen dalam repo ini, dan paket ini ditulis dengan TypeScript, dan diuji menggunakan Jest untuk memastikan kualitasnya.
Anda tidak perlu membaca semua dokumen di sini, karena paket ini sekarang mendukung vs Code Intellisense apa itu? Cukup ketika Anda mengarahkan mouse Anda ke beberapa variabel atau fungsi vs kode akan menampilkan beberapa popup (tutorial sederhana) apa fungsinya, contoh, param, dll ...
Cukup gunakan kode sumber dari situs web demo, Anda benar -benar dapat memahami paketnya.
Ya itu bisa, tanyakan saja obrolan GPT, dan jelaskan masalah Anda.
Contoh :
"Proyek saya menggunakan Webpack, kode menggunakan JSX, saya ingin menggunakan kode TSX di samping JSX, bagaimana saya bisa?"
Goto sorotan pidato vanilla
Saya membuat demo untuk mengeluarkan viseme ke konsol.log. Cukup buka konsol browser dan mainkan contoh preferensi audio (bahasa Inggris). Dan Anda akan melihat kata dan viseme dalam waktu yang diputar saat ini.
Lihat saja demo
Coba gunakan file preferensi atau fallback ke audio lihat audio_file.md
atau
Cobalah untuk mengatur sintesis atau bahasa ucapan di perangkat Anda.
Jika Anda menggunakan smartphone (Android):
Pastikan Anda memasang pengenalan ucapan & sintesis
Jika langkah 1 tidak berhasil. Coba unduh Google Keyboard. kemudian mengatur bahasa dikte. Tunggu beberapa menit (perangkat Anda akan secara otomatis mengunduh suara), lalu restart ponsel cerdas Anda.
Perangkat Anda akan mengunduh suara itu terlebih dahulu. maka perangkat Anda akan memiliki suara itu secara lokal.
Coba gunakan file preferensi atau fallback ke audio lihat audio_file.md
Ya, lihat
Paket ini secara opsional membutuhkan AI API Buka untuk melakukan tugas teks-ke-ucapan (menyelesaikan banyak masalah yang saya tulis di Problem.md).
Tetapi jika Anda tidak ingin menggunakan Open AI API, itu masih bisa berhasil. Lihat FAQ tentang ketergantungan apa yang digunakan paket ini?
Ketergantungan NPM:
Untuk sorotan pidato bereaksi: lihat paket.json dalam repo ini. Lihat peerDependencies Setelah Anda membuat paket ini, Anda hanya perlu paket NPM yang ada di peerDependencies itu. Hanya bereaksi.
Untuk sorotan pidato vanilla: tidak ada ketergantungan, cukup gunakan file vanilla js.
AI Ketergantungan:
Paket ini secara opsional membutuhkan AI API Buka untuk melakukan tugas teks-ke-ucapan (menyelesaikan banyak masalah yang saya tulis di Problem.md).
Secara opsional menggunakan API TTS apa pun yang dapat menghasilkan file audio untuk kualitas suara yang lebih baik. Seperti Elevenlabs, Murf AI, Open AI, Amazon Polly, dan Google Cloud atau API TTS lainnya selama mereka dapat menghasilkan file audio (MP3, MP4, WAV, dll ...) untuk detailnya lihat audio_file.md.
Ya, lihat detailnya di test.md
atau Anda dapat mencoba menggunakan file preferensi atau fallback ke audio lihat audio_file.md
Itu hanya berhasil. Penjelasan sederhana ada dalam pengantar di atas.
Arsitektur dapat diskalakan, tanyakan saja pada saya fitur apa yang Anda inginkan.
Lihat llm_engine.md
Tidak, karena paket saya menangani semua sistem batching, sistem pengumuman, dan menyediakan teks sehingga API TTS dapat menghasilkan file audio yang dapat digunakan untuk disorot.
Anda bisa melakukan strategi caching untuk menyimpan respons permintaan. untuk API AI AI dan TTS API untuk file audio.
Untuk pengembang individu, freelancer, atau bisnis kecil.
Harganya USD $ 200. Terlalu mahal? Lihat situs web demo mungkin ada diskon untuk Anda atau mengisi formulir ini yang Anda beri tahu saat ada penawaran.
Setelah pembayaran, Anda akan diundang ke repositori pribadi saya, di mana Anda akan memiliki akses selama satu tahun, termasuk semua pembaruan selama waktu itu.
Untuk akses berkelanjutan di tahun -tahun berikutnya, Anda dapat membayar USD $ 50 per tahun untuk tetap berada di repositori pribadi.
Apa yang kamu punya
Situs web demo (berbasis JS berikutnya)
Paket repo (sorotan pidato reaksi)
Paket repo (sorotan pidato vanilla)
Saya tahu paket ini kompleks, beberapa fitur yang membutuhkan arsitektur & keterampilan pemrograman lanjutan untuk menggunakannya.
Jadi saya membuat beberapa tutorial screencast penuh tentang cara menggunakan senjata canggih semacam ini.
Dari instalasi hingga contoh implementasi lanjutan dan banyak lagi.
Harganya berlangganan $ 5 / bulan. (Segera hadir)
Untuk Anda yang sudah memiliki bisnis dan menginginkan paket solid yang dapat digunakan untuk jangka panjang.
Harganya USD $ 700.
Apa yang kamu punya
Harganya USD $ 150.
Apa yang kamu punya
Berisi: Sorotan Transkrip Relasi YouTube, Transkrip Generat Otomatis Video, Streaming TTS
Berisi: Backenify LLM Engine
React GPT Web Guide ($ 100) + react ucapan sorotan ( $ 200 ) ($ 50) = $ 150
Apa yang kamu punya
Saya menerima berbagai metode pembayaran:
Sponsor GitHub
Pilih tab One Time, pilih opsi, dan ikuti instruksi berikutnya dari GitHub.
Jadi paket ini adalah jawaban untuk Anda yang mencari:
