Preferences API

README.md

@@ -137,6 +137,7 @@ Documentation provides guides for:
 - [Voices and Filtering](docs/VoicesAndFiltering.md)
 - [Voice Management](docs/VoiceManagement.md)
 - [Playback API](docs/Playback.md)
+- [Preferences](docs/Preferences.md) — verbosity and prosody settings via `SpeechPreferences`/`SpeechSettings`
 - [Highlighting](docs/Highlighting.md)
 - [Guided Navigation](docs/GuidedNavigation.md) — extracting [Guided Navigation objects](https://readium.org/guided-navigation) from HTML/XHTML content
 - [Utterance Extraction](docs/UtteranceExtraction.md) — extracting utterances from Guided Navigation objects

demo/playground/index.html

@@ -47,30 +47,37 @@ <h2>3. Utterances</h2>
       </div>
 
       <div id="utterances-options" class="options-bar">
-        <fieldset class="options-group">
-          <legend>Format</legend>
-          <label><input type="radio" name="format" value="plain" checked> plain</label>
-          <label><input type="radio" name="format" value="ssml"> ssml</label>
-        </fieldset>
+        <fieldset class="options-group options-grid">
+          <legend>Utterances options</legend>
 
-        <fieldset class="options-group">
-          <legend>Language</legend>
-          <select id="option-language">
-            <option value="">(default)</option>
-            <option value="always">always</option>
-            <option value="block-level">block-level</option>
-            <option value="none">none</option>
-          </select>
-        </fieldset>
+          <div class="field" id="format-group">
+            <span class="field-caption">Format</span>
+            <small class="default-hint" id="format-hint"></small>
+          </div>
 
-        <fieldset class="options-group">
-          <label><input type="checkbox" id="option-interrupt"> interruptSentence</label>
-          <label><input type="checkbox" id="option-contextualize" checked> contextualize</label>
-        </fieldset>
+          <div class="field">
+            <label><span class="field-caption">Language</span> <select id="option-language"></select></label>
+            <small class="default-hint" id="language-hint"></small>
+          </div>
 
-        <fieldset class="options-group">
-          <legend>Skip roles</legend>
-          <select id="option-skip" multiple></select>
+          <div class="field">
+            <label><input type="checkbox" id="option-interrupt"> inlineContextualization</label>
+            <small class="default-hint" id="inline-contextualization-hint"></small>
+          </div>
+
+          <div class="field field-composite">
+            <label><span class="field-caption">Verbosity</span> <select id="option-verbosity"></select></label>
+            <small class="default-hint" id="verbosity-hint"></small>
+            <div class="field-sub">
+              <span class="field-caption">Only used when verbosity is "custom":</span>
+              <label><span class="field-caption">Skip roles</span> <select id="option-skip" multiple></select></label>
+              <label><span class="field-caption">Contextualize roles</span> <select id="option-contextualize" multiple></select></label>
+            </div>
+          </div>
+
+          <div class="field">
+            <button id="reset-extraction-preferences" type="button">Reset options</button>
+          </div>
         </fieldset>
       </div>
 
@@ -94,13 +101,67 @@ <h2>4. Speech preview</h2>
 
       <div class="options-bar">
         <fieldset class="options-group">
-          <button id="speech-play" type="button">Play</button>
-          <button id="speech-pause" type="button">Pause</button>
-          <button id="speech-resume" type="button">Resume</button>
+          <button id="speech-toggle" type="button">Play</button>
           <button id="speech-stop" type="button">Stop</button>
         </fieldset>
       </div>
 
+      <div class="options-bar">
+        <fieldset class="options-group options-grid">
+          <legend>Prosody</legend>
+          <div class="field">
+            <label>
+              <span class="field-caption">pauseDuration</span>
+              <span class="field-control">
+                <input type="range" id="option-pause-duration">
+                <output id="option-pause-duration-value"></output>
+              </span>
+            </label>
+            <small class="default-hint" id="pause-duration-hint"></small>
+          </div>
+          <div class="field">
+            <label>
+              <span class="field-caption">pauseScope</span>
+              <select id="option-pause-scope"></select>
+            </label>
+            <small class="default-hint" id="pause-scope-hint"></small>
+          </div>
+          <div class="field">
+            <label>
+              <span class="field-caption">rate</span>
+              <span class="field-control">
+                <input type="range" id="option-rate">
+                <output id="option-rate-value"></output>
+              </span>
+            </label>
+            <small class="default-hint" id="rate-hint"></small>
+          </div>
+          <div class="field">
+            <label>
+              <span class="field-caption">pitch</span>
+              <span class="field-control">
+                <input type="range" id="option-pitch">
+                <output id="option-pitch-value"></output>
+              </span>
+            </label>
+            <small class="default-hint" id="pitch-hint"></small>
+          </div>
+          <div class="field">
+            <label>
+              <span class="field-caption">volume</span>
+              <span class="field-control">
+                <input type="range" id="option-volume">
+                <output id="option-volume-value"></output>
+              </span>
+            </label>
+            <small class="default-hint" id="volume-hint"></small>
+          </div>
+          <div class="field">
+            <button id="reset-prosody-preferences" type="button">Reset prosody</button>
+          </div>
+        </fieldset>
+      </div>
+
       <ol id="speech-utterances" class="speech-utterances"></ol>
     </div>
   </main>