Buat sambungan krom teks-ke-ucapan

mata teras

Artikel ini menerangkan cara membuat pelanjutan teks-ke-ucapan penyemak imbas Chrome (TTS) yang menggunakan API sintesis suara HTML5 atau API pihak ketiga untuk menukar kandungan teks atau papan klip ke dalam ucapan.

Sambungan krom biasanya mengandungi fail nyata (fail metadata), imej (seperti ikon lanjutan), fail HTML, fail JavaScript, dan sumber lain (seperti helaian gaya).

TTS Extension menunggu pengguna untuk mengklik ikon mereka atau tekan hotkey tertentu (Shift Y), dan kemudian menukarkan kandungan teks atau papan klip yang diserlahkan ke suara.

Kod untuk lanjutan termasuk skrip latar belakang dan skrip kandungan, keizinan untuk mengakses tag aktif dan papan klip pengguna, serta menyemak teks atau kandungan papan klip yang diserlahkan, memulakan sambungan, menambah hotkeys, dan menukar teks ke kaedah suara.

Jika API sintesis suara HTML5 tidak tersedia, lanjutan akan menggunakan API pihak ketiga seperti RSS suara untuk menukar teks ke ucapan. Pelanjutan ini juga termasuk pembetulan pepijat untuk memperbaiki masalah yang Chrome berhenti sebutan selepas 200-300 perkataan.

Artikel ini telah dikaji semula oleh Marc Towler. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint Perfect!

Teks untuk ucapan (juga dikenali sebagai sintesis pertuturan atau TTS) adalah cara untuk menghasilkan ucapan manusia secara buatan. Ini bukan sesuatu yang baru, menurut Wikipedia, orang telah cuba mencipta mesin yang dapat menghasilkan suara manusia selama sekurang -kurangnya seribu tahun.

TTS menjadi lebih dan lebih biasa dalam kehidupan kita hari ini dan semua orang boleh mendapat manfaat daripadanya. Kami akan menunjukkan ini dengan membuat sambungan krom yang menukarkan teks kepada ucapan. HTML5 membawa kami API sintesis ucapan yang membolehkan mana -mana aplikasi web untuk menukar rentetan teks sewenang -wenang ke dalam ucapan dan bermain kepada pengguna secara percuma.

sambungan krom biasanya mengandungi yang berikut:

fail bakat (fail yang diperlukan yang mengandungi metadata)
imej (seperti ikon untuk lanjutan)
fail html (contohnya, tetingkap popup yang muncul apabila pengguna mengklik pada ikon pelanjutan)
fail JavaScript (seperti skrip kandungan dan/atau latar belakang yang akan dijelaskan kemudian)
Sebarang sumber lain yang boleh digunakan oleh aplikasi (seperti helaian gaya)

mengenai halaman untuk melanjutkan suara

Oleh kerana populariti krom dan kebangkitan TTS, kami akan membuat sambungan krom yang menukarkan teks ke suara. Pelanjutan akan menunggu pengguna mengklik ikon mereka atau tekan hotkey khas (Shift Y), dan kemudian cuba cari apa yang pengguna menyoroti pada halaman yang sedang mereka lihat, atau cuba mencari apa yang disalin ke papan klip mereka. Jika ada yang dijumpai, ia akan mula-mula cuba menukarnya kepada ucapan menggunakan API sintesis ucapan HTML5, dan jika API itu tidak tersedia, API pihak ketiga dipanggil.

Asas Extension Chrome

Setiap sambungan krom memerlukan fail bernama manifest.json. Manifest adalah fail JSON yang mengandungi data yang penting untuk aplikasi, dari nama, keterangan, ikon, dan pengarang pelanjutan, kepada data yang mentakrifkan keperluan pelanjutan - laman web yang harus dilanjutkan dapat dijalankan (ini akan menjadi kebenaran yang harus diberikan pengguna) atau fail apa yang hendak dijalankan apabila pengguna melayari laman web tertentu.

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

senarai kami bermula dengan nama, penerangan, pengarang, versi, dan ikon pelanjutan. Anda boleh menyediakan banyak ikon dengan saiz yang berbeza dalam objek ikon.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

Kemudian, kita menentukan skrip latar belakang yang dipanggil latar belakang.min.js dalam objek latar belakang (perhatikan bahawa kita menggunakan fail pengurangan). Skrip latar belakang adalah skrip jangka panjang yang akan terus berjalan sehingga penyemak imbas pengguna ditutup atau lanjutan dilumpuhkan.

Selepas

kami mempunyai pelbagai content_scripts yang mengarahkan Chrome untuk memuatkan dua fail JavaScript pada setiap permintaan laman web kerana wildcards " http: //*/*" dan "https: //*/*" "dan" https: //*/*"". Tidak seperti skrip latar belakang, skrip kandungan boleh mengakses DOM dari laman web sebenar pengguna yang dikunjungi. Skrip kandungan boleh membaca dan mengubah suai DOM dari mana -mana laman web yang tertanam di dalamnya. Oleh itu, polyfill.min.js dan ext.min.js kami akan dapat membaca dan mengubah suai semua data pada setiap laman web .

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

tunggu! Kami juga mempunyai array yang dipanggil Kebenaran, yang kami minta untuk mengakses hanya laman web (tag aktiviti) yang kini dibuka oleh pengguna. Kami juga meminta kebenaran lain yang dipanggil ClipboardRead, yang akan membolehkan kami membaca papan klip pengguna (jadi kami boleh menukar kandungannya ke dalam suara).

menulis halaman untuk menyuarakan sambungan krom

3 Apabila ini berlaku, kami akan memanggil fungsi SendMessage, yang menggunakan kaedah chrome.tabs.sendmessage (tabid, mesej, panggil balik) untuk menghantar mesej ke skrip kandungan kami (skrip kandungan dapat membaca DOM dan mengetahui apa yang pengguna menyoroti pengguna . Kami menggunakan kaedah chrome.tabs.Query untuk menghantar mesej ke halaman tab yang dibuka sekarang - kerana ini adalah apa yang kami berminat dan apa yang kami dapat mengakses - parameter kaedah termasuk fungsi panggil balik yang akan menggunakan yang berikut : Tanya panggilan parameter untuk halaman tab yang sepadan.

chrome.browserAction.onClicked.addListener(function (tab) {
    //fired when the user clicks on the ext's icon
    sendMessage();
});
function sendMessage() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "pageToSpeech"}, function(response) {});
  });
}

Sekarang, perkara yang lebih verbose adalah skrip kandungan kami. Kami membuat objek untuk memegang beberapa data yang berkaitan dengan lanjutan dan kemudian menentukan kaedah permulaan kami.

initialize: function() {
    if (!pageToSpeech.hasText()) { return;}
    if (!pageToSpeech.trySpeechSynthesizer()) {
        pageToSpeech.trySpeechApi();
    }
},

Kaedah ini memeriksa sama ada pengguna tidak diserlahkan dengan teks atau tiada apa -apa dalam papan klip, dan dalam kes ini ia hanya dikembalikan. Jika tidak, ia akan cuba menjana ucapan menggunakan API sintesis ucapan HTML5. Jika ini gagal, ia akhirnya akan cuba menggunakan API pihak ketiga.

bagaimana untuk menyemak teks melakukan beberapa tindakan. Ia cuba mendapatkan objek yang mengandungi teks yang diserlahkan menggunakan kaedah getSelection terbina dalam dan mengubahnya menjadi rentetan teks menggunakan ToString (). Kemudian, jika teks tidak diserlahkan, ia akan cuba mencari teks dalam papan klip pengguna. Ia melakukan ini dengan menambahkan elemen input ke halaman, memfokuskannya, mencetuskan acara tampal dengan execcommand ('tampal'), dan kemudian menyimpan teks yang disisipkan ke dalam input itu dalam harta. Kemudian ia membersihkan input. Dalam kedua -dua kes, ia mengembalikan apa yang dijumpai.

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

Untuk membolehkan pengguna menjalankan penukaran teks-ke-ucapan menggunakan hotkeys (keras dikodkan sebagai shift y), kami memulakan array dan menubuhkan pendengar acara untuk acara onkeydown dan onkeyup. Dalam pendengar, kami menyimpan indeks yang sepadan dengan kod kunci kunci yang ditekan, yang diperolehi daripada hasil perbandingan jenis acara E.Type dan keydown, dan merupakan nilai Boolean. Oleh itu, apabila kunci ditekan, nilai indeks kunci yang sepadan akan ditetapkan kepada benar, dan apabila kunci dibebaskan, nilai indeks akan ditukar kepada palsu. Oleh itu, jika kedua -dua indeks 16 dan 84 memegang nilai yang benar, kita tahu bahawa pengguna menggunakan hotkey kami, jadi kami akan memulakan teks kepada penukaran pertuturan.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

Untuk menukar teks ke ucapan, kami bergantung pada kaedah tryspeechsynthesizer (). Jika sintesis ucapan HTML5 wujud dalam penyemak imbas pengguna (window.speechsynthesis), kita tahu bahawa pengguna boleh menggunakannya, jadi kita periksa sama ada ucapan sedang berjalan (kita tahu jika ia berjalan melalui pagetospeech.data.speechinprogress boolean) . Sekiranya suara sedang berjalan, kami akan menghentikan suara semasa (kerana Tryspeechsynthesizer akan memulakan suara baru, kami tidak mahu membuat dua bunyi pada masa yang sama). Kami kemudian menetapkan SpeechInprogress kepada Benar, dan apabila ucapannya selesai, kami menetapkan harta itu kepada nilai palsu sekali lagi.

Sekarang, saya tidak mahu menghuraikan mengapa kita menggunakan SpeectutteranceChunker, tetapi ia adalah pembetulan pepijat yang berkaitan dengan sintesis ucapan Chrome selepas memancarkan 200-300 perkataan. Pada asasnya, ia memisahkan rentetan teks kami ke dalam banyak ketulan yang lebih kecil (120 perkataan dalam kes kami) dan memanggil API sintesis ucapan menggunakan satu blok demi satu.

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

Akhirnya, jika API sintesis suara HTML5 tidak tersedia, kami akan mencuba API. Kami mempunyai sifat yang sama untuk mengetahui sama ada kita perlu menghentikan audio yang sudah berjalan. Kami kemudian membuat objek audio baru secara langsung dan lulus url titik akhir API yang dikehendaki, kerana API demo yang kami pilih secara langsung mengalir audio. Kami hanya perlu lulus kunci API dan teks yang akan ditukar. Kami juga menyemak sama ada audio mencetuskan ralat. Dalam kes ini, kita hanya perlu menunjukkan pengguna amaran bahawa kami tidak dapat membantu pada masa ini (kami menguji kod untuk API khusus ini, RSS suara, yang membolehkan 300 permintaan pada hierarki percuma).

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

Akhirnya, di luar mana -mana skop tempatan, kami memanggil kaedah AddHotKeys, yang akan mula menunggu pengguna menekan hotkey yang betul, dan kami menyediakan pendengar yang akan menunggu mesej diterima dari skrip latar belakang. Jika anda menerima mesej yang betul ( speakhighlight ) atau tekan hotkey, kami akan memulakan teks ke objek penukaran pertuturan.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

Kesimpulan

suara, kami mempunyai sambungan krom yang bagus yang menukarkan teks ke suara. Konsep di sini boleh digunakan untuk membuat sambungan krom untuk tujuan yang berbeza. Adakah anda telah membina sambungan krom yang menarik, atau adakah anda ingin membina satu? Tolong beritahu saya dalam komen!

Jika anda menyukai idea ini dan ingin membangunkannya lebih jauh, anda boleh mencari kod lengkap dalam repositori GitHub kami. Jika anda ingin mengujinya, anda boleh mencari versi pengeluaran pelanjutan di kedai web Chrome.

rujukan: https://www.php.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad Teks untuk pertuturan Chrome Extension FAQ

bagaimana memasang teks untuk menyuarakan sambungan krom?

Memasang sambungan krom teks-ke-ucapan adalah proses yang mudah. Pertama, buka pelayar Google Chrome anda dan navigasi ke kedai web Chrome. Di bar carian, masukkan nama pelanjutan yang ingin anda pasang, seperti "membaca dengan lantang" atau "teks-ke-ucapan (TTS)". Klik pelanjutan dari hasil carian dan klik butang "Tambah ke Chrome". Tetingkap pop timbul akan kelihatan meminta pengesahan dan klik "Tambah Sambungan". Pelanjutan akan dipasang dan ikon akan muncul di bar alat penyemak imbas anda.

Bolehkah saya menyesuaikan suara saya dalam teks saya untuk lanjutan krom ucapan?

Ya, kebanyakan teks untuk sambungan krom ucapan membolehkan anda menyesuaikan ucapan anda. Anda biasanya boleh memilih dari pelbagai suara, termasuk suara lelaki dan perempuan dalam aksen dan bahasa yang berbeza. Untuk menyesuaikan suara anda, klik ikon Sambungan pada bar alat penyemak imbas dan navigasi ke menu Tetapan atau Pilihan. Di sini anda perlu mencari pilihan untuk menukar suara, kelajuan, nada, dan kelantangan.

Adakah teks untuk menyuarakan sambungan krom percuma untuk digunakan?

Banyak sambungan krom teks-ke-ucapan bebas untuk digunakan, tetapi ada yang boleh mengenakan bayaran yang kecil untuk menawarkan ciri-ciri canggih. Ciri-ciri canggih ini mungkin termasuk suara lain, penggunaan bebas iklan, atau menyimpan fail audio. Pastikan anda menyemak butiran pelanjutan di kedai web Chrome sebelum memasang.

Bolehkah saya menggunakan teks untuk menyuarakan sambungan Chrome di luar talian?

Beberapa teks untuk menyuarakan sambungan krom boleh digunakan di luar talian, tetapi tidak semua sambungan dapat melakukannya. Ia bergantung kepada bagaimana lanjutan direka. Jika penggunaan luar talian adalah penting untuk anda, periksa keterangan pelanjutan di kedai web Chrome atau tetapan untuk pelanjutan selepas pemasangan.

Bagaimana menggunakan teks untuk lanjutan krom ucapan?

3 Kemudian, klik pada ikon lanjutan pada bar alat penyemak imbas. Sesetengah sambungan akan segera mula membaca halaman dengan kuat, sementara yang lain mungkin memerlukan anda memilih teks yang ingin anda baca. Anda biasanya boleh menggunakan kawalan dalam tetingkap pop timbul untuk menjeda, menyambung semula, atau berhenti membaca.

Bolehkah saya menggunakan teks untuk menyuarakan sambungan Chrome di mana -mana laman web?

Kebanyakan teks untuk menyuarakan sambungan Chrome harus berfungsi di mana -mana laman web, dengan pengecualian mungkin. Sesetengah laman web mungkin mempunyai masalah keserasian dengan sambungan tertentu, atau sambungan mungkin tidak dapat membaca jenis kandungan tertentu, seperti imej atau video. Jika anda mempunyai masalah, cuba gunakan sambungan yang berbeza atau hubungi pemaju pelanjutan untuk sokongan.

Adakah data saya selamat dalam teks untuk lanjutan krom pertuturan?

Kebanyakan sambungan krom teks-ke-ucapan harus menghormati privasi anda dan tidak akan mengumpul atau berkongsi data anda tanpa persetujuan anda. Walau bagaimanapun, adalah lebih baik untuk memeriksa dasar privasi pelanjutan sebelum memasang. Jika anda tidak berpuas hati dengan dasar ini, pertimbangkan untuk mencari sambungan lain.

Bolehkah saya menukar kelajuan ucapan dalam teks untuk bersuara dalam lanjutan krom?

Ya, kebanyakan teks untuk sambungan krom ucapan membolehkan anda menyesuaikan kelajuan ucapan anda. Ini biasanya boleh dilakukan dalam menu tetapan atau pilihan pelanjutan. Anda biasanya boleh memilih pelbagai kelajuan, dari sangat perlahan hingga sangat cepat.

Bolehkah saya menggunakan teks untuk menyuarakan sambungan krom dalam penyemak imbas lain?

Teks untuk ucapan Chrome Extension direka untuk dijalankan di Google Chrome dan mungkin tidak dijalankan dalam penyemak imbas lain. Walau bagaimanapun, banyak pemaju lanjutan juga akan membuat versi sambungan mereka untuk pelayar lain, seperti Firefox atau Edge. Sila semak laman web pemaju atau kedai sambungan yang berkaitan untuk pelayar ini untuk melihat sama ada terdapat versi yang tersedia.

Bolehkah saya menggunakan teks untuk menyuarakan sambungan krom pada peranti mudah alih saya?

Beberapa teks untuk menyuarakan sambungan Chrome boleh berfungsi untuk Chrome pada Android atau iOS, tetapi tidak semua sambungan tersedia. Ia bergantung kepada bagaimana lanjutan direka. Jika penggunaan mudah alih adalah penting untuk anda, periksa keterangan pelanjutan di kedai web Chrome atau tetapan untuk pelanjutan selepas pemasangan.

Atas ialah kandungan terperinci Buat sambungan krom teks-ke-ucapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!