Code splitting (#42)

Author: JayPanoz

README.md

@@ -103,9 +103,14 @@ async function setupVoices() {
       excludeVeryLowQuality: true
     });
 
-    // Get voices grouped by language
-    const voices = voiceManager.getVoices();
-    const groupedByLanguage = voiceManager.groupVoices(voices, "languages");
+    // Sort by quality
+    const sortedByQuality = await voiceManager.sortVoicesByQuality(filteredVoices);
+
+    // Sort by preferred languages
+    const sortedByLanguage = await voiceManager.sortVoicesByLanguages(["en", "fr"], filteredVoices);
+
+    // Sort by preferred languages and regions
+    const sortedByRegion = await voiceManager.sortVoicesByRegions(["en-US", "en-GB"], filteredVoices);
 
     // Get a test utterance for a specific language
     const testText = voiceManager.getTestUtterance("en");
@@ -134,11 +139,16 @@ The main class for managing Web Speech API voices with enhanced functionality.
 #### Initialize the Voice Manager
 
 ```typescript
-static initialize(maxTimeout?: number, interval?: number): Promise<WebSpeechVoiceManager>
+static initialize(options?: {
+  languages?: string[];
+  maxTimeout?: number;
+  interval?: number;
+}): Promise<WebSpeechVoiceManager>
 ```
 
 Creates and initializes a new WebSpeechVoiceManager instance. This static factory method must be called to create an instance.
 
+- `languages`: Optional array of preferred language codes to filter voices during initialization
 - `maxTimeout`: Maximum time in milliseconds to wait for voices to load (default: 10000ms)
 - `interval`: Interval in milliseconds between voice loading checks (default: 100ms)
 - Returns: Promise that resolves with a new WebSpeechVoiceManager instance
@@ -179,20 +189,20 @@ Returns arrays of languages and regions with their display names and voice count
 #### Get Default Voice
 
 ```typescript
-voiceManager.getDefaultVoice(languages: string | string[], voices?: ReadiumSpeechVoice[]): ReadiumSpeechVoice | null
+async voiceManager.getDefaultVoice(languages: string | string[], voices?: ReadiumSpeechVoice[]): Promise<ReadiumSpeechVoice | null>
 ```
 
 Automatically selects the best available voice based on quality and language preferences. This is the recommended method for getting a suitable voice without manual selection.
 
 ```typescript
 // Get the best voice for user's browser language
-const defaultVoice = voiceManager.getDefaultVoice(navigator.languages || ["en"]);
+const defaultVoice = await voiceManager.getDefaultVoice(navigator.languages || ["en"]);
 
 // Get the best voice for specific preferred languages
-const frenchVoice = voiceManager.getDefaultVoice(["fr-FR", "fr-CA"]);
+const frenchVoice = await voiceManager.getDefaultVoice(["fr-FR", "fr-CA"]);
 
 // Get the best voice from a pre-filtered voice list
-const customVoice = voiceManager.getDefaultVoice(["en-US", "en-GB"], customVoiceList);
+const customVoice = await voiceManager.getDefaultVoice(["en-US", "en-GB"], customVoiceList);
 ```
 
 The selection algorithm:
@@ -236,7 +246,7 @@ If you need more control over the sorting process, you can implement and apply y
 Sort voices from highest to lowest quality:
 
 ```typescript
-voiceManager.sortVoicesByQuality(voices?: ReadiumSpeechVoice[]);
+async voiceManager.sortVoicesByQuality(voices?: ReadiumSpeechVoice[]): Promise<ReadiumSpeechVoice[]>;
 // Returns: [veryHigh, high, normal, low, veryLow, null]
 ```
 
@@ -247,7 +257,7 @@ If no voices are provided, it sorts the instance's internal voice list.
 Prioritize specific languages while maintaining JSON data’s quality order within each language group:
 
 ```typescript
-voiceManager.sortVoicesByLanguages(preferredLanguages?: string[], voices?: ReadiumSpeechVoice[]);
+async voiceManager.sortVoicesByLanguages(preferredLanguages?: string[], voices?: ReadiumSpeechVoice[]): Promise<ReadiumSpeechVoice[]>;
 // Returns: [preferred languages voices, other languages voices...]
 ```
 
@@ -258,7 +268,7 @@ If no voices are provided, it sorts the instance's internal voice list.
 Sort voices by preferred languages and regions, while maintaining JSON data’s quality order within each region group:
 
 ```typescript
-voiceManager.sortVoicesByRegions(preferredLanguages?: string[], voices?: ReadiumSpeechVoice[]);
+async voiceManager.sortVoicesByRegions(preferredLanguages?: string[], voices?: ReadiumSpeechVoice[]): Promise<ReadiumSpeechVoice[]>;
 // Returns: [languages in preferred then alphabetical order → regions: preferred regions → default region → alphabetical regions → voice quality within each region]
 ```
 

demo/article/script.js

@@ -25,10 +25,10 @@ let readAlongEnabled = true; // Default to true to match default checkbox state
 async function initialize() {
   try {
     // Initialize the voice manager
-    voiceManager = await WebSpeechVoiceManager.initialize();
+    voiceManager = await WebSpeechVoiceManager.initialize({languages: ["en"]});
 
-    // Only get English voices
-    enVoices = voiceManager.getVoices({languages: "en", removeDuplicates: true});
+    // Get English voices asynchronously
+    enVoices = await voiceManager.getVoices({removeDuplicates: true});
 
     // Initialize the navigator
     navigator = new WebSpeechReadAloudNavigator();
@@ -39,11 +39,11 @@ async function initialize() {
     // Initialize the UI
     updateUI();
 
-    // Populate voice select
-    populateVoiceSelect();
+    // Populate voice select asynchronously
+    await populateVoiceSelect();
 
-    // Get the default voice for English
-    currentVoice = voiceManager.getDefaultVoice("en");
+    // Get the default voice for English asynchronously
+    currentVoice = await voiceManager.getDefaultVoice("en", enVoices);
 
     if (currentVoice && navigator) {
       navigator.setVoice(currentVoice);
@@ -173,24 +173,29 @@ async function initializeContent() {
 }
 
 // Populate voice select dropdown
-function populateVoiceSelect() {
+async function populateVoiceSelect() {
   if (!voiceSelect) return;
 
-  voiceSelect.innerHTML = "<option value=\"\" disabled selected>Select a voice</option>";
+  voiceSelect.innerHTML = "<option value=\"\" disabled selected>Loading voices...</option>";
 
-  if (!enVoices || !enVoices.length) {
-    const option = document.createElement("option");
-    option.disabled = true;
-    option.textContent = "No voices available. Please check your browser settings and internet connection.";
-    voiceSelect.appendChild(option);
-    return;
-  }
+  try {
+    if (!enVoices || !enVoices.length) {
+      enVoices = await voiceManager.getVoices({languages: "en", removeDuplicates: true});
+    }
+    
+    voiceSelect.innerHTML = "<option value=\"\" disabled selected>Select a voice</option>";
+    
+    if (!enVoices || !enVoices.length) {
+      const option = document.createElement("option");
+      option.disabled = true;
+      option.textContent = "No voices available. Please check your browser settings and internet connection.";
+      voiceSelect.appendChild(option);
+      return;
+    }
 
   try {
     // Sort by region while preserving quality order within each region
-    const sortedVoices = voiceManager.sortVoicesByRegions(["en"], enVoices);
-
-    console.log(sortedVoices);
+    const sortedVoices = await voiceManager.sortVoicesByRegions(["en"], enVoices);
 
     let currentRegion = null;
     let optgroup = null;
@@ -223,14 +228,22 @@ function populateVoiceSelect() {
       optgroup?.appendChild(option);
     }
 
-    // Set the default voice selection
+    // If we have a current voice, select it
     if (currentVoice) {
-      const option = voiceSelect.querySelector(`option[value="${currentVoice.name}"]`);
+      const option = voiceSelect.querySelector(`option[data-voice-uri="${currentVoice.voiceURI}"]`);
       if (option) {
         option.selected = true;
       }
     }
 
+    // Update the UI to reflect the current state
+    updateUI();
+    
+  } catch (error) {
+    console.error("Error populating voice select:", error);
+    voiceSelect.innerHTML = "<option value=\"\" disabled selected>Error loading voices</option>";
+  }
+  
   } catch (error) {
     console.error("Error populating voice dropdown:", error);
     // Fallback to simple list if there's an error

demo/script.js

@@ -66,11 +66,11 @@ speechNavigator.on("error", (event) => {
 // Initialize the application
 async function init() {
   try {
-    // Initialize the voice manager
+    // Initialize the voice manager with preferred languages
     voiceManager = await WebSpeechVoiceManager.initialize();
 
     // Sort those voices by browser preference using sortVoicesByRegions
-    const voices = voiceManager.sortVoicesByRegions(window.navigator.languages);
+    const voices = await voiceManager.sortVoicesByRegions(window.navigator.languages);
 
     // Get languages
     languages = voiceManager.getLanguages(window.navigator.languages[0], { removeDuplicates: true }, voices);
@@ -201,18 +201,18 @@ function displayVoiceProperties(voice) {
 }
 
 // Replace current voice with a new default voice if it gets filtered out
-function replaceCurrentVoiceIfFilteredOut(language) {
+async function replaceCurrentVoiceIfFilteredOut(language) {
   const currentVoiceFilteredOut = currentVoice && !filteredVoices.some(voice => voice.voiceURI === currentVoice.voiceURI);
   const needNewVoice = !currentVoice && filteredVoices.length > 0;
 
   if (currentVoiceFilteredOut || needNewVoice) {
     // Current voice was filtered out or no voice selected, pick a new default voice based on language
     if (filteredVoices.length > 0) {
-      currentVoice = voiceManager.getDefaultVoice(language, filteredVoices);
+      currentVoice = await voiceManager.getDefaultVoice(language, filteredVoices);
 
       if (currentVoice) {
         try {
-          speechNavigator.setVoice(currentVoice);
+          await speechNavigator.setVoice(currentVoice);
           displayVoiceProperties(currentVoice);
           updateTestUtterance(currentVoice, language);
 
@@ -235,7 +235,7 @@ function replaceCurrentVoiceIfFilteredOut(language) {
 }
 
 // Filter voices based on current filters
-function filterVoices() {
+async function filterVoices() {
   const language = languageSelect.value;
   const gender = genderSelect.value;
   const source = sourceSelect.value;
@@ -269,16 +269,16 @@ function filterVoices() {
     filteredVoices = voicesFilteredExceptLanguage;
   }
 
-  populateVoiceDropdown(language);
+  await populateVoiceDropdown(language);
 
   // Replace current voice if it was filtered out
-  replaceCurrentVoiceIfFilteredOut(language);
+  await replaceCurrentVoiceIfFilteredOut(language);
 
   updateUI();
 }
 
 // Populate the voice dropdown with filtered voices
-function populateVoiceDropdown() {
+async function populateVoiceDropdown() {
   voiceSelect.innerHTML = "<option value='' disabled selected>Select a voice</option>";
 
   try {
@@ -291,7 +291,7 @@ function populateVoiceDropdown() {
     }
 
     // Sort voices with browser's preferred languages first
-    const sortedVoices = voiceManager.sortVoicesByRegions(window.navigator.languages, [...filteredVoices]);
+    const sortedVoices = await voiceManager.sortVoicesByRegions(window.navigator.languages, [...filteredVoices]);
 
     // Group the sorted voices by region
     const voiceGroups = voiceManager.groupVoices("region", sortedVoices);
@@ -550,22 +550,22 @@ function setupEventListeners() {
     displayVoiceProperties(null);
 
     // Filter voices for the selected language
-    filterVoices();
+    await filterVoices();
 
     // Get the default voice for the selected language using pre-filtered voices
     if (baseLanguage) {
       // Use the full navigator.languages array for proper language preference handling
       const preferredLanguages = [...(window.navigator.languages || [window.navigator.language] || [baseLanguage])];
 
-      currentVoice = voiceManager.getDefaultVoice(
+      currentVoice = await voiceManager.getDefaultVoice(
         preferredLanguages, 
         filteredVoices.length ? filteredVoices : undefined
       );
 
       if (currentVoice) {
         try {
           // Set the voice for the navigator
-          speechNavigator.setVoice(currentVoice);
+          await speechNavigator.setVoice(currentVoice);
 
           // Update the voice dropdown to reflect the selected voice
           const voiceOption = voiceSelect.querySelector(`option[value="${currentVoice.name}"]`);
@@ -600,7 +600,7 @@ function setupEventListeners() {
     if (currentVoice) {
       try {
         // Set the voice for the navigator
-        speechNavigator.setVoice(currentVoice);
+        await speechNavigator.setVoice(currentVoice);
 
         // Display voice properties
         displayVoiceProperties(currentVoice);
@@ -655,18 +655,18 @@ function setupEventListeners() {
   });
 
   // Update voices when gender filter changes
-  genderSelect.addEventListener("change", () => {
-    filterVoices();
+  genderSelect.addEventListener("change", async () => {
+    await filterVoices();
   });
 
   // Update voices when source filter changes
-  sourceSelect.addEventListener("change", () => {
-    filterVoices();
+  sourceSelect.addEventListener("change", async () => {
+    await filterVoices();
   });
 
   // Update voices when offline filter changes
-  offlineOnlyCheckbox.addEventListener("change", () => {
-    filterVoices();
+  offlineOnlyCheckbox.addEventListener("change", async () => {
+    await filterVoices();
   });
 
   // Update test utterance when language changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/speech",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.7",
   "description": "Readium Speech is a TypeScript library for implementing a read aloud feature with Web technologies. It follows [best practices](https://github.com/HadrienGardeur/read-aloud-best-practices) gathered through interviews with members of the digital publishing industry.",
   "main": "./build/index.cjs",
   "module": "./build/index.js",
@@ -19,6 +19,7 @@
   },
   "scripts": {
     "test": "npm run build && NODE_NO_WARNINGS=1 ava test/**/*.test.ts",
+    "generate-metadata": "node scripts/generate-metadata.js",
     "clean": "rimraf ./build",
     "build": "vite build",
     "start": "node build/index.js",