วิธีการเพิ่มคุณสมบัติ Text-to-Speech บนหน้าเว็บใด ๆ

ข้อความเป็นคำพูด คุณสมบัติหมายถึง คำบรรยายพูดของข้อความ แสดงบนอุปกรณ์ ในปัจจุบันอุปกรณ์เช่นแล็ปท็อปแท็บเล็ตและโทรศัพท์มือถือ มีคุณสมบัตินี้อยู่แล้ว. แอปพลิเคชันใด ๆ ที่ทำงานบนอุปกรณ์เหล่านี้เช่นเว็บเบราว์เซอร์สามารถทำได้ ใช้ประโยชน์จากมัน, และ ขยายการทำงานของมัน. คุณลักษณะการบรรยายสามารถช่วยได้อย่างเหมาะสมสำหรับแอปพลิเคชันที่ แสดงข้อความมากมาย, ในขณะที่มัน มีตัวเลือกในการฟัง ถึงผู้เยี่ยมชมเว็บไซต์.

Web Speech API

API ของ Web Speech JavaScript เป็นประตูสู่ เข้าถึงคุณลักษณะ Text-to-Speech โดยเว็บเบราว์เซอร์. ดังนั้นหากคุณต้องการแนะนำฟังก์ชั่นการแปลงข้อความเป็นคำพูดบนเว็บเพจที่มีข้อความหนักและอนุญาตให้ผู้อ่านของคุณฟังเนื้อหาคุณสามารถใช้ประโยชน์ API ที่มีประโยชน์นี้หรือเฉพาะเจาะจงมากขึ้น SpeechSynthesis อินเตอร์เฟซ.

รหัสเริ่มต้นและการตรวจสอบการสนับสนุน

ในการเริ่มต้นให้สร้างเว็บเพจด้วย ฉันตัวอย่างข้อความที่จะเล่า, และ สามปุ่ม.

 
    
 
 
กระต่ายกับเพื่อนมากมาย
  
กระต่ายเป็นที่นิยมใน ... 
 
แต่เขาปฏิเสธโดยระบุว่า ... 
  
นิทานสอนใจ… 
 
 

ปุ่มจะเป็น การควบคุมสำหรับการบรรยาย. ตอนนี้เราต้องแน่ใจว่าถ้า UA รองรับ SpeechSynthesis อินเตอร์เฟซ. หากต้องการทำเช่นนั้นเราจะตรวจสอบกับ JavaScript อย่างรวดเร็วหาก หน้าต่าง วัตถุมี 'SpeechSynthesis' คุณสมบัติ, หรือไม่.

 onload = function () ถ้า ('speechSynthesis' ในหน้าต่าง) / * สนับสนุนการสังเคราะห์เสียงพูด * / else / * ไม่สนับสนุนการสังเคราะห์เสียงพูด * / 

ถ้า SpeechSynthesis สามารถใช้ได้ก่อนอื่นเรา สร้างการอ้างอิงสำหรับ SpeechSynthesis ที่เรามอบหมายให้ synth ตัวแปร. เรายัง เริ่มต้นธง กับ เท็จ มูลค่า (เราจะเห็นวัตถุประสงค์ในภายหลังในโพสต์) และเรา สร้างการอ้างอิงและคลิกตัวจัดการเหตุการณ์ สำหรับปุ่มทั้งสาม (เล่นหยุดชั่วคราวหยุด) เช่นกัน.

เมื่อผู้ใช้คลิกที่ปุ่มใดปุ่มหนึ่งฟังก์ชั่นนั้น ๆ (onClickPlay (), onClickPause (), onClickStop ()) จะถูกเรียก.

 if ('speechSynthesis' ในหน้าต่าง) var synth = speechSynthesis; var flag = false; / * อ้างอิงถึงปุ่ม * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# หยุดชั่วคราว'); var stopEle = document.querySelector ('# stop'); / * คลิกตัวจัดการเหตุการณ์สำหรับปุ่ม * / playEle.addEventListener ('คลิก', onClickPlay); pauseEle.addEventListener ('คลิก', onClickPause); stopEle.addEventListener ('คลิก', onClickStop); ฟังก์ชั่น onClickPlay ()  ฟังก์ชั่น onClickPause ()  ฟังก์ชั่น onClickStop ()  

สร้างฟังก์ชั่นที่กำหนดเอง

ตอนนี้เรามา สร้างฟังก์ชั่นคลิก ของแต่ละปุ่มสามปุ่มที่จะถูกเรียกใช้โดยตัวจัดการเหตุการณ์.

1. เล่น / เล่นต่อ

เมื่อมีการคลิกปุ่มเล่นครั้งแรกเรา ตรวจสอบ ธง. ถ้ามัน เท็จ, เราตั้งค่าเป็น จริง, ดังนั้นหากมีการคลิกปุ่มในภายหลังรหัสภายใน เป็นครั้งแรก ถ้า เงื่อนไขจะไม่ดำเนินการ (ไม่ใช่จนกว่าธงจะเป็น เท็จ อีกครั้ง).

ถ้าอย่างนั้นเรา สร้างตัวอย่างใหม่ของ SpeechSynthesisUtterance อินเทอร์เฟซที่เก็บข้อมูลเกี่ยวกับคำพูดเช่นข้อความที่จะอ่านระดับเสียงคำพูดเสียงพูดความเร็วระดับเสียงและภาษาของคำพูด เราเพิ่มข้อความบทความ เป็นพารามิเตอร์ของตัวสร้าง, และกำหนดให้กับ คำพูด ตัวแปร.

 ฟังก์ชั่น onClickPlay () ถ้า (! flag) flag = true; utterance = ใหม่ SpeechSynthesisUtterance (document.querySelector ('บทความ'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (คำพูด);  if (synth.paused) / * ยกเลิกการหยุดชั่วคราว / กลับมาเล่าเรื่อง * / synth.resume ();  

เราใช้ SpeechSynthesis.getVoices () วิธีการ กำหนดเสียงสำหรับการพูด จากเสียงที่มีอยู่ในอุปกรณ์ของผู้ใช้ เนื่องจากวิธีนี้จะส่งกลับอาร์เรย์ของตัวเลือกเสียงทั้งหมดที่มีในอุปกรณ์เรา กำหนดเสียงของอุปกรณ์ที่มีครั้งแรก โดยใช้ utterance.voice = synth.getVoices () [0]; คำแถลง.

onend คุณสมบัติหมายถึงตัวจัดการเหตุการณ์ที่เป็น ดำเนินการเมื่อคำพูดเสร็จสิ้น. ข้างในนั้นเราเปลี่ยนค่าของ ธง ตัวแปร กลับไปเป็นเท็จ เพื่อให้รหัสที่เริ่มต้นการพูด สามารถดำเนินการได้ เมื่อปุ่มเป็น คลิกอีกครั้ง.

จากนั้นเราก็เรียก SpeechSynthesis.speak () วิธีการในการ เริ่มต้นคำบรรยาย. เราก็ต้องตรวจสอบ ถ้าคำบรรยายหยุดชั่วคราว, ที่เราใช้อ่านอย่างเดียว SpeechSynthesis.paused คุณสมบัติ หากคำบรรยายหยุดชั่วคราวเราจำเป็นต้องทำ กลับมาเล่าเรื่องต่อ ในการคลิกปุ่มซึ่งเราสามารถทำได้โดยใช้ปุ่ม SpeechSynthesis.resume () วิธี.

2. หยุดชั่วคราว

ตอนนี้เรามาสร้าง onClickPause () ฟังก์ชั่นที่เราตรวจสอบครั้งแรก หากการบรรยายยังดำเนินอยู่และไม่หยุดชั่วคราว. เราสามารถทดสอบเงื่อนไขเหล่านี้ได้โดยการใช้ SpeechSynthesis.speaking และ SpeechSynthesis.paused คุณสมบัติ. หากเงื่อนไขทั้งสองเป็นจริงของเรา onClickPause () ฟังก์ชัน หยุดคำพูดชั่วคราว โดยการโทร SpeechSynthesis.pause () วิธี.

 ฟังก์ชั่น onClickPause () ถ้า (synth.speaking &&! synth.paused) / * หยุดการเล่าเรื่อง * / synth.pause ();  

3. หยุด

onClickStop () ฟังก์ชั่นคือ สร้างคล้ายกับ onClickPause (). หากคำพูดยังคงดำเนินต่อไปเรา หยุดนะ โดยการโทร SpeechSynthesis.cancel () วิธีการที่ ลบคำพูดทั้งหมด.

 ฟังก์ชั่น onClickStop () ถ้า (synth.speaking) / * หยุดคำบรรยาย * / / * สำหรับซาฟารี * / flag = false; synth.cancel ();  

โปรดทราบว่าในการยกเลิกการพูด onend เหตุการณ์จะเริ่มทำงานโดยอัตโนมัติ, และเราได้เพิ่มรหัสตั้งค่าสถานะใหม่ไว้ภายในแล้ว อย่างไรก็ตาม, มีข้อผิดพลาดในเบราว์เซอร์ Safari ที่ป้องกันไม่ให้เหตุการณ์นี้เกิดขึ้นนั่นเป็นสาเหตุที่เราตั้งค่าสถานะใหม่ใน onClickStop () ฟังก์ชัน คุณไม่ต้องทำถ้าคุณไม่ต้องการสนับสนุน Safari.

รองรับเบราว์เซอร์

เบราว์เซอร์สมัยใหม่ทุกรุ่นล่าสุด มีการสนับสนุนเต็มหรือบางส่วน สำหรับ API การสังเคราะห์เสียงพูด เบราว์เซอร์ Webkit ไม่เล่นคำพูดจากหลายแท็บการหยุดชั่วคราวเป็นบั๊ก (ใช้งานได้ แต่บั๊ก) และคำพูดจะไม่ถูกรีเซ็ตเมื่อผู้ใช้โหลดซ้ำหน้าเว็บในเบราว์เซอร์ Webkit.

สาธิตการทำงาน

ดูตัวอย่างสดด้านล่างหรือดูรหัสเต็มบน Github.

ดูปากกา°Å¸â£ÂÂ'£ข้อความเป็นคำพูด - JavaScript โดย HONGKIAT (@hkdc) บน CodePen.