spoken word

Kata yang diucapkan

Tambahkan teks-ke-speech (TTS) ke konten, dengan kontrol pemutaran, penyorotan baca-bersama, dukungan multi-bahasa, dan pengaturan untuk tingkat, nada, dan suara.

Kontributor: Westonruter
Tag: TTS, sintesis ucapan, teks-ke-ucapan, audio, suara, baca-bersama
Membutuhkan setidaknya: 4.7
Diuji hingga: 4.9
Tag stabil: 1.0.1
Lisensi: MIT
Membutuhkan PHP: 5.4

Keterangan

Tambahkan teks-ke-speech (TTS) ke konten, dengan kontrol pemutaran, penyorotan baca-bersama, dukungan multi-bahasa, dan pengaturan untuk tingkat, nada, dan suara.

• Menggunakan mesin teks-ke-speech lokal di browser pengguna. Secara langsung berinteraksi dengan API browser speechSynthesis . Nol permintaan atau dependensi eksternal.
• Kata -kata dipilih/disorot saat diucapkan untuk memungkinkan Anda membaca bersama.
• Melewati elemen berbicara yang tidak boleh dibaca, termasuk catatan kaki superskrip (elemen sup ).
• Jeda dengan panjang berbeda yang ditambahkan adalah antara judul versus paragraf.
• Kontrol tetap terlihat selama pemutaran, dengan masing -masing teks saat ini diucapkan secara terus -menerus digulir ke tampilan. (Membutuhkan dukungan browser untuk position:sticky .)
• Kontrol Back/Forward memungkinkan Anda untuk melompat ke paragraf berikutnya; Ketika tidak berbicara, paragraf berikutnya yang harus dibaca akan dipilih sepenuhnya.
• Pilih teks untuk dibaca dari titik itu; Klik teks selama pidato untuk segera mengubah posisi.
• Dukungan multi-bahasa, memungkinkan teks tertanam dengan atribut [lang] diucapkan oleh suara yang sesuai (dengan asumsi pengguna telah diinstal).
• Pengaturan untuk mengubah suara default (untuk setiap bahasa), bersama dengan pengaturan untuk tingkat pidato dan nada. (Tidak didukung oleh semua mesin.) Perubahan dapat dilakukan saat berbicara.
• Hit Escape untuk berhenti selama pemutaran.
• Preferensi suara secara terus -menerus disimpan di localStorage , dengan perubahan yang disinkronkan di seluruh jendela (dari situs tertentu).
• Kemampuan untuk menggunakan JS dengan cara mandiri (seperti dalam bookmarklet).
• Dikenal bekerja di versi desktop terbaru Chrome, Firefox, dan Safari. speechSynthesis Untuk alasan ini, fungsionalitas dinonaktifkan secara default pada sistem operasi seluler.

Cobalah pada contoh mandiri dengan beberapa konten tes.

Konfigurasi Tema

Pengaturan untuk kata lisan disajikan dalam elemen dialog HTML5. Untuk browser yang belum mendukung fitur ini, plugin mengikat dialog-polyfill. Polyfill hanya termasuk jika terdeteksi browser tidak mendukung dialog secara asli. Dimasukkannya polyfill dapat dinonaktifkan dengan menambahkan yang berikut ini ke tema atau plugin Anda:

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

Untuk tema yang memiliki header lengket (seperti menu NAV dalam dua puluh tujuh belas) Anda mungkin perlu menambahkan beberapa CSS tambahan untuk memastikan bahwa kontrol pemutaran yang diposisikan lengket tidak disembunyikan di balik tajuk lengket. Misalnya dalam dua puluh tujuh belas, Anda dapat menambahkan yang berikut ini ke CSS khusus di Customizer:

 @media screen and ( min-width : 782 px ) {
	body : not (. admin-bar ) . spoken-word--active {
		top : calc ( 0.5 em + 70 px );
	}
	body . admin-bar . spoken-word--active {
		top : calc ( 0.5 em + 32 px + 70 px );
	}
}

Internal

Bookmarklet dapat digunakan untuk memuat fungsi kata yang diucapkan ke situs mana pun, bahkan situs non-wordpress di mana plugin tidak diinstal. Kuncinya adalah menggunakan contentSelector yang sesuai:

 ( ( ) => {
	const link = document . createElement ( 'link' ) ;
	link . rel = 'stylesheet' ;
	link . href = 'https://unpkg.com/spoken-word/css/style.css' ;
	document . head . appendChild ( link ) ;

	const script = document . createElement ( 'script' ) ;
	script . src = 'https://unpkg.com/spoken-word/dist/spoken-word.js' ;
	script . addEventListener ( 'load' , ( ) => {
		spokenWord . initialize ( {
			contentSelector : [ /* ? Amend as desired. */
				'.hentry' ,
				'.entry-content' ,
				'.h-entry' ,
				'.e-content' ,
				'[itemprop="articleBody"]' ,
			] . join ( ', ' )
		} ) ;
	} ) ;
	document . head . appendChild ( script ) ;
} ) ( ) ;

Fungsi spokenWord.initialize() mengambil objek sebagai argumennya yang dapat memiliki properti berikut:

 * @param {String} ContentSelector - Pemilih CSS untuk menemukan elemen untuk berbicara.
 * @param {elemen} rooteLement - elemen root untuk mencari konten.
 * @param {Object} ChunkifyOptions - Opsi diteruskan ke Chunkify.
 * @param {boolean} UsedAshicons - apakah akan menggunakan dashicons.
 * @param {Object} DefaultutteranceOptions - Opsi ucapan default ketika tidak ada yang disuplai dari LocalStorage.

Dialog dan kontrol diterjemahkan menggunakan preact. Untuk daftar semua modul yang digunakan oleh plugin ini, lihat paket.json.

Plugin ini dikembangkan di GitHub di mana sumber dapat dilihat. Harap laporkan masalah di sana. Tarik permintaan selamat datang. Paket spoken-word juga diterbitkan di NPM.

Tangkapan layar

Kata -kata disorot (dipilih) saat diucapkan.

Ubah kurs, nada, dan suara yang digunakan dalam pidato.

Lewati ke depan ke paragraf yang diinginkan dengan kontrol atau melalui pemilihan dengan kursor.

Changelog

1.0.1 (2018-01-21)

Nonaktifkan fungsionalitas di perangkat Android dan iOS secara default.

1.0.0 (2018-01-20)

Rilis awal.