ดาวน์โหลด spoken word - ดาวน์โหลดรหัสคำพูด spoken word

spoken word

โค้ดแหล่งที่มา AI

1.0.1

ดาวน์โหลด

คำพูด

แบนเนอร์ เพิ่ม text-to-speech (TTS) ลงในเนื้อหาด้วยการควบคุมการเล่นการเน้นการอ่านการสนับสนุนหลายภาษาและการตั้งค่าสำหรับอัตราระดับเสียงและเสียง

ผู้มีส่วนร่วม: Westonruter
Tags: TTS, การสังเคราะห์คำพูด, ข้อความเป็นคำพูด, เสียง, เสียง, การอ่าน-พร้อมกัน
ต้องใช้อย่างน้อย: 4.7
ทดสอบมากถึง: 4.9
แท็กเสถียร: 1.0.1
ใบอนุญาต: MIT
ต้องใช้ PHP: 5.4

คำอธิบาย

เพิ่ม text-to-speech (TTS) ลงในเนื้อหาด้วยการควบคุมการเล่นการเน้นการอ่านการสนับสนุนหลายภาษาและการตั้งค่าสำหรับอัตราระดับเสียงและเสียง

ใช้เอ็นจิ้นข้อความเป็นคำพูดในเบราว์เซอร์ของผู้ใช้ เชื่อมต่อโดยตรงกับ API เบราว์เซอร์ speechSynthesis คำขอหรือการพึ่งพาภายนอกเป็นศูนย์
คำจะถูกเลือก/เน้นตามที่พวกเขากำลังพูดเพื่อให้คุณอ่านได้
ข้ามองค์ประกอบการพูดที่ไม่ควรอ่านรวมถึง Superscripts เชิงอรรถ (องค์ประกอบ sup )
การหยุดชั่วคราวที่เพิ่มความยาวต่างกันอยู่ระหว่างส่วนหัวกับวรรค
การควบคุมยังคงอยู่ในมุมมองระหว่างการเล่นโดยแต่ละข้อความปัจจุบันถูกพูดอย่างต่อเนื่องจะถูกเลื่อนเข้าสู่มุมมอง (ต้องการการสนับสนุนเบราว์เซอร์สำหรับ position:sticky )
การควบคุมด้านหลัง/ไปข้างหน้าช่วยให้คุณข้ามไปยังย่อหน้าถัดไป; เมื่อไม่ได้พูดย่อหน้าถัดไปที่จะอ่านจะถูกเลือกทั้งหมด
เลือกข้อความเพื่ออ่านจากจุดนั้น คลิกที่ข้อความในระหว่างการพูดเพื่อเปลี่ยนตำแหน่งทันที
การสนับสนุนแบบหลายภาษาช่วยให้ข้อความฝังตัวพร้อมแอตทริบิวต์ [lang] ที่จะพูดได้ด้วยเสียงที่เหมาะสม (สมมติว่าผู้ใช้ติดตั้ง)
การตั้งค่าสำหรับการเปลี่ยนเสียงเริ่มต้น (สำหรับแต่ละภาษา) พร้อมกับการตั้งค่าสำหรับอัตราการพูดและระดับเสียง (ไม่ได้รับการสนับสนุนจากเครื่องยนต์ทั้งหมด) การเปลี่ยนแปลงสามารถทำได้ในขณะที่พูด
ตีหลบหนีไปหยุดชั่วคราวระหว่างการเล่น
การตั้งค่าเสียงจะถูกจัดเก็บอย่างต่อเนื่องใน localStorage โดยมีการเปลี่ยนแปลงที่ซิงค์ข้าม Windows (ของเว็บไซต์ที่กำหนด)
ความสามารถในการใช้ JS ในลักษณะสแตนด์อโลน (เช่นใน Bookmarklet)
เป็นที่รู้จักกันในการทำงานในรุ่นล่าสุดของ Chrome, Firefox และ Safari (ทดสอบบน OSX) มันไม่ได้ทำงานได้อย่างน่าเชื่อถือในเบราว์เซอร์มือถือ/สัมผัสบน Android หรือ iOS เห็นได้ชัดว่าเกิดจาก speechSynthesis (ยังคงทดลอง) API (ยังคงทดลอง) ด้วยเหตุผลเหล่านี้ฟังก์ชั่นจะถูกปิดใช้งานโดยค่าเริ่มต้นในระบบปฏิบัติการมือถือ

ลองใช้ตัวอย่างแบบสแตนด์อโลนด้วยเนื้อหาทดสอบบางอย่าง

ชุดรูปแบบการกำหนดค่า

การตั้งค่าสำหรับคำพูดจะถูกนำเสนอในองค์ประกอบ dialog HTML5 สำหรับเบราว์เซอร์ที่ยังไม่รองรับคุณสมบัตินี้ปลั๊กอินรวมกล่องโต้ตอบ-โพลีฟิลด์ polyfill จะรวมเฉพาะในกรณีที่ตรวจพบเบราว์เซอร์ไม่รองรับ dialog โดยธรรมชาติ การรวม polyfill สามารถปิดใช้งานได้โดยการเพิ่มสิ่งต่อไปนี้ในธีมหรือปลั๊กอินของคุณ:

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

สำหรับธีมที่มีส่วนหัวเหนียว (เช่นเมนู NAV ในยี่สิบสิบเจ็ด) คุณอาจต้องเพิ่ม CSS เพิ่มเติมบางส่วนเพื่อให้แน่ใจว่าการควบคุมการเล่นที่ติดตำแหน่งไม่ได้ถูกซ่อนไว้หลังส่วนหัวเหนียว ตัวอย่างเช่นในยี่สิบสิบเจ็ดคุณสามารถเพิ่มสิ่งต่อไปนี้ใน CSS ที่กำหนดเองใน 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 );
	}
}

ภายใน

บุ๊คมาร์คเล็ตสามารถใช้ในการโหลดฟังก์ชั่นคำพูดลงในไซต์ใด ๆ แม้กระทั่งไซต์ที่ไม่ใช่ wordpress ที่ไม่ได้ติดตั้งปลั๊กอิน กุญแจสำคัญคือการใช้ contentSelector ที่เหมาะสม:

 ( ( ) => {
	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 ) ;
} ) ( ) ;

ฟังก์ชัน spokenWord.initialize() ใช้วัตถุเป็นอาร์กิวเมนต์ซึ่งสามารถมีคุณสมบัติดังต่อไปนี้:

 * @param {String} contentSelector - ตัวเลือก CSS เพื่อค้นหาองค์ประกอบสำหรับการพูด
 * @param {Element} rootelement - องค์ประกอบรูทภายในเพื่อค้นหาเนื้อหา
 * @param {Object} chunkifyoptions - ตัวเลือกส่งผ่านไปยัง chunkify
 * @param {boolean} usedashicons - ไม่ว่าจะใช้ dashicons หรือไม่
 * @param {Object} DefaultUtteranceOptions - ตัวเลือกคำพูดเริ่มต้นเมื่อไม่มีการจัดหาจาก LocalStorage

กล่องโต้ตอบและตัวควบคุมจะแสดงผลโดยใช้ preact สำหรับรายการโมดูลทั้งหมดที่ใช้โดยปลั๊กอินนี้ดู package.json

ปลั๊กอินนี้ได้รับการพัฒนาบน GitHub ซึ่งสามารถดูแหล่งที่มาได้ โปรดรายงานปัญหาที่นั่น ยินดีต้อนรับการร้องขอ แพ็คเกจ spoken-word ถูกเผยแพร่ใน NPM