Creating a Japanese poetry quiz using the Web Speech API presents unique challenges. Here's a look at the hurdles encountered and the solutions devised.
Introduction
A fascinating project involved crafting a quiz around 百人一首 (Hyakunin Isshu), a revered anthology from the 13th century. This endeavor surfaced unexpected challenges with the Web Speech API, particularly regarding historical Japanese spelling, voice availability across browsers, and the queuing behavior of SpeechSynthesis.
Features of the Quiz
- Displays the initial 5-7-5 phrase (kami) of a waka poem.
- Players select the correct closing 7-7 phrase (shimo) from four choices.
- An alternative mode challenges users to identify the poem's author.
- Optional read-aloud feature using the browser's Web Speech API.
- Built with Vue 3, Vite, and TypeScript.
- Initial version includes 30 curated poems.
Challenges Encountered
Handling Historical Kana
Classical Japanese poetry often uses historical kana that modern TTS engines may misinterpret. For instance, Shikishi Naishinnō's poem has different spellings and pronunciations that require separate strings for display and speech synthesis.
Asynchronous Voice Enumeration
The getVoices() function behaves inconsistently across browsers, necessitating a workaround with the voiceschanged event and a timeout to prevent indefinite waiting.
export function loadJaVoices() { /* implementation details */ }
Managing Speech Queues
Repeatedly pressing the read-aloud button can queue multiple utterances, leading to poor user experience. Implementing cancel() before speak() ensures a clean queue.
export async function speak(text, options) { /* implementation details */ }
Additional Insights
Quiz Logic Separation
Keeping the quiz logic in a separate TypeScript file allows for more straightforward testing and maintenance.
Data Challenges
Classical Japanese often features formulaic endings, which can make distinguishing between poems challenging. Future iterations should consider edit-distance solutions to ensure better distractor choices.
Conclusion
Developing a quiz based on historical Japanese content requires careful handling of language and API quirks. By addressing these challenges, developers can create a more robust and user-friendly experience.