ฟังก์ชันการสังเคราะห์เสียงพูด HTML5 ที่ไม่ค่อยมีใครรู้จัก

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

โปรดสวมหูฟังก่อน จากนั้นคัดลอกโค้ดต่อไปนี้ลงในคอนโซล Chrome เพื่อสัมผัส ~

 ให้ msg = new SpeechSyntheticUtterance(ยินดีต้อนรับสู่อ่านบล็อกของฉัน);window.speechSynthetic.speak(msg);

ดูสิ การใช้การสังเคราะห์เสียงพูดในส่วนหน้าไม่ใช่เรื่องยาก

จากตัวอย่างข้างต้น เราสามารถเดาฟังก์ชันของทั้งสองวิธีที่เรียกข้างต้นได้

 SpeechSyntehesisUtterancwindow.speechSynthetic.speak

แน่นอนว่าการสังเคราะห์เสียงพูดไม่ได้รวมเฉพาะ API ทั้งสองนี้เท่านั้น แต่ยังมาเริ่มด้วยสองประเด็นนี้กันก่อน

ข้อมูลอ้างอิง: Developer.mozilla.org/en-US/docs/… ออบเจ็กต์ SpeechSyntehesisUtteranc มีเนื้อหาให้อ่านโดยบริการเสียงพูดและพารามิเตอร์บางอย่าง เช่น ภาษา ระดับเสียง และระดับเสียง

 SpeechSyntehesisUtteranc()SpeechSyntheticUtterance.langSpeechSyntheticUtterance.pitchSpeechSyntheticUtterance.rateSpeechSyntheticUtterance.voiceSpeechSclusionUtterance.volume

หมายเหตุ: คุณสมบัติข้างต้นทั้งหมดสามารถอ่านและเขียนได้! คุณสามารถคัดลอกโค้ดด้านล่างและทดลองใช้ได้ โดยจะมีคำแนะนำอยู่ในความคิดเห็น

 ให้ msg = new SpeechSyntheticUtterance();msg.text = คุณเป็นอย่างไรบ้าง // ข้อความที่จะสังเคราะห์ msg.lang = en-US // การออกเสียงภาษาอังกฤษแบบอเมริกัน (เลือกโดยอัตโนมัติตามค่าเริ่มต้น) msg.rate = 2 // ความเร็วสองเท่า (ค่าเริ่มต้น คือ 1, ระยะ 0.1~10) msg.pitch = 2 // ระดับเสียงสูง (ยิ่งตัวเลขมาก, ยิ่งคมชัดขึ้น, ค่าเริ่มต้นคือ 1, ระยะ 0~2) msg.volume = 0.5 // ปริมาณ 0.5 เท่า (ค่าเริ่มต้นคือ 1, ช่วง 0~1) window.speechSynthetic.speak(msg);

ในเวลาเดียวกัน ออบเจ็กต์นี้ยังสามารถตอบสนองต่อชุดของเหตุการณ์ซึ่งอาจใช้:

• เริ่ม
• จบ
• ขอบเขต
• หยุดชั่วคราว
• ประวัติย่อ

ด้วยความช่วยเหลือของเหตุการณ์เหล่านี้ เราสามารถทำหน้าที่ง่ายๆ บางอย่างได้สำเร็จ เช่น การนับจำนวนคำในประโยคภาษาอังกฤษ:

 ให้นับ = 0; // จำนวนคำ ให้ msg = new SpeechSyntheticUtterance();ให้ synth = window.speechSynthetic;msg.addEventListener('start',()=>{ // เริ่มอ่าน console.log(`เนื้อหาข้อความ: $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // สิ้นสุดการอ่าน console.log(end); console.log(`จำนวนคำข้อความ (คำ): ${count}`); count = 0;});msg.addEventListener('boundary',()=>{ // นับจำนวนคำ++;});

หลังจากลองแล้ว เนื่องจากภาษาจีนไม่ได้ใช้ช่องว่างเพื่อแยกแต่ละคำ ระบบจะจดจำคำดังกล่าวโดยอัตโนมัติ เช่น ยินดีต้อนรับสู่ผู้อ่านจะรับรู้เป็นสองคำ: ยินดีต้อนรับ และผู้อ่าน

อ้างอิง: Developer.mozilla.org/en-US/docs/…

หลังจากพูดถึง SpeechSyntehesisUtteranc แล้ว เรามาดูเรื่อง SpeechSynthetic กันดีกว่า

หน้าที่หลักของการสังเคราะห์เสียงพูดคือการควบคุมคำพูด เช่น การเริ่มต้นหรือการหยุดชั่วคราว

มีคุณสมบัติอ่านอย่างเดียวสามประการที่ระบุสถานะของเสียง:

 SpeechSynthetic.pausedSpeechSynthetic.รอดำเนินการ

นอกจากนี้ยังมีวิธีต่างๆ มากมายในการจัดการกับคำพูด:

•SpeechSynthetic.speak() เริ่มอ่านคำพูดและทริกเกอร์เหตุการณ์เริ่มต้นพร้อมกัน

•SpeechSynthetic.pause() หยุดชั่วคราวและทริกเกอร์เหตุการณ์หยุดชั่วคราว

•SpeechSynthetic.resume() ดำเนินต่อไปและทริกเกอร์เหตุการณ์เรซูเม่ในเวลาเดียวกัน

•SpeechSynthetic.cancel() ยกเลิกการอ่านและทริกเกอร์เหตุการณ์สิ้นสุดพร้อมกัน

จากวิธีดำเนินการเหล่านี้ เราสามารถปรับปรุงโปรแกรมอ่านข้อความของเราเพิ่มเติมได้:

ย้อนกลับไปที่จุดเริ่มต้นเดิมจากเนื้อหาข้างต้น เราสามารถเดาได้ว่าการอ่านบทความอัตโนมัติจะถูกนำมาใช้ในบางเว็บไซต์อย่างไร

หากส่วนหน้าของเว็บไซต์นี้ใช้เฟรมเวิร์ก MVVM (ใช้ Vue เป็นตัวอย่าง) เนื้อหาของบทความก็อาจถูกจัดเก็บไว้ในข้อมูล ซึ่งสามารถใช้สร้างการสังเคราะห์เสียงพูดที่เราต้องการได้

แน่นอนว่า อาจเป็นไปได้ด้วยว่าได้รับบทความผ่านการร้องขอ ajax ข้อมูลที่ร้องขอจะถูกแยกวิเคราะห์ และสร้างออบเจ็กต์การสังเคราะห์เสียงพูด

หากบทความเขียนด้วย HTML โดยตรง จะต้องแยกวิเคราะห์ DOM ในเวลานี้ หลังจากการทดสอบ แม้แต่โครงสร้างที่วุ่นวายดังต่อไปนี้

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

อ่านข้อความโดยตรงผ่าน InnerText จากนั้นสร้างวัตถุสังเคราะห์เสียงพูด และคุณยังสามารถอ่านได้ตามลำดับที่ต้องการ (รูปภาพจะถูกละเว้น)

แน่นอนว่า หากเราต้องการละเว้นโครงสร้างพิเศษบางอย่าง เช่น ตาราง เราก็สามารถใช้ความพยายามในการแยกวิเคราะห์และกรองข้อมูลหรือองค์ประกอบ DOM ที่เราไม่ต้องการออกไปได้

ไม่ว่ายังไงเราก็สามารถหาวิธีแก้ปัญหาที่เหมาะสมได้~

คุณลักษณะนี้ยังอยู่ในฉบับร่างและไม่ได้รับการสนับสนุนอย่างกว้างขวาง

ขอย้ำอีกครั้งว่า API นี้ยังใช้กับสภาพแวดล้อมการใช้งานจริงไม่ได้

แนวทางที่ใช้กันทั่วไปในปัจจุบันคือการสร้าง API (อาจเป็น API ของบริษัทอื่น) ที่สังเคราะห์ข้อความเป็นไฟล์คำพูดที่ส่วนหลัง แล้วเล่นเป็นสื่อที่ส่วนหน้า

ครั้งหนึ่งเมื่อฉันสับสน ฉันอ่านบทความจากผู้เชี่ยวชาญและอ่านความคิดระดับสูงเกี่ยวกับการพัฒนาส่วนหน้า สิ่งหนึ่งที่ทำให้ฉันประทับใจอย่างสุดซึ้ง:

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

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