<h1> Speech Tester </h1>
<div><span>This page is for testing the speech recognition and text to speech features of this MiniLesson.</span><br />
    <span>Set the "Recording, Language and Transcription" options first. Pressing submit will reload the page.</span><br />
    <span>If the transcription method is set to <strong>guided</strong>:</span><br />
    <ul>
        <li>there is an option to transcribe the generated text to speech.</li>
        <li>sample text to use from THIS activity will be displayed.</li>
    </ul>
    <span>NB "Guided" for English and some other languages is limited to the text in THIS activity</span><br />
</div>
<hr />
<h3>Recording, Language and Transcription Options</h3>
<span>Select the recorder options below, press submit, and test recording.</span><br />
<form id="speechtester_form" method="post" action="{{{pageurl}}}">
<select name="language" id="speechtester_language">
    {{#languages}}
    <option value="{{key}}" {{selected}}>{{display}}</option>
{{/languages}}
</select><br />
<input type="checkbox" name="stt_guided" id="speechtester_stt_guided" value="1" {{checked_stt_guided}}> Check to use 'guided transcription' (otherwise it is 'open transcription'</input><br />
<input type="checkbox" name="forcestreaming" id="speechtester_forcestreaming" value="1" {{checked_forcestreaming}}> Check to use 'alternate streaming' (only applies with 'open transcription')</input><br />
<button type="submit" class="btn btn-primary" id="speechtester_submit">Submit</button>
</form>
<hr />
<h3>Text to Speech Options</h3>
<span>Choose a voice and a language and enter some text in the text area.</span><br />
<select id="speechtester_voice">
    {{#voices}}
    <option value="{{key}}">{{display}}</option>
    {{/voices}}
</select><br />

<textarea id="speechtester_text" rows="4" cols="50" placeholder="enter text to be spoken here">
</textarea><br />
<button type="button" class="btn btn-secondary" id="speechtester_pollybutton">Make Audio Player</button>
<div id="speechtester_audiocontainer">
    <audio id="speechtester_audioplayer" controls="controls" src="{{{itemaudio}}}" class="mod_minilesson_itemaudio" crossorigin="anonymous"></audio>
</div>
<br />
 {{#checked_stt_guided}}
<hr/>
Transcribe the generated audio using the transcription settings below<br />
<button type="button" class="btn btn-secondary" id="speechtester_transcribebutton">Transcribe</button><br />

 {{/checked_stt_guided}}
<hr />
<h3>Transcription Results</h3>
<div id="speechtester_transcription" style="
    width: 400px;
    border: 1px grey solid;
    padding: 5px;
    margin: 5px;">
</div><br />
<div id="speechtester_transcription_coverage">
</div>
<hr />
<h3>Recorder</h3>
<div>
<ul>
    <li>Guided Transcription: {{#checked_stt_guided}}YES{{/checked_stt_guided}}{{^checked_stt_guided}}NO{{/checked_stt_guided}}</li>
    {{#checked_stt_guided}}<li>Guided Usable Text: <br />{{{guidedusetext}}}</li>{{/checked_stt_guided}}
    <li>Open Transcription: {{#checked_stt_guided}}NO{{/checked_stt_guided}}{{^checked_stt_guided}}YES{{/checked_stt_guided}}</li>
    <li>Alternate Transcription : {{#checked_forcestreaming}}YES{{/checked_forcestreaming}}{{^checked_forcestreaming}}NO{{/checked_forcestreaming}}</li>
    <li>Language : {{language}}</li>
    <li>Region : {{region}}</li>
</ul>
</div><br />
<div class="ml_speechtester_speakbtncontainer" style="width:246px;">
    {{> mod_minilesson/ttrecorder}}
</div>