index.html

<!DOCTYPE html>
<html>
  <head>
	
	<!-- SSML Testing Tool v2.3 
			Author: Mark Hakkinen (mhakkinen@ets.org), Irfan Ali (iali@ets.org)
			Prior Modified: October 10, 2018 IA
			Last Modified: October 23, 2018 MH
			-->
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
	<title>ETS SSML Markup Tester v2.4</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">	
	<link rel="stylesheet" href="ssml.css">
	<script src="script.js"></script>
	
  </head>

  <body>
	 <div class="container"> 
    <h1>ETS SSML in HTML Markup Tester v2.7 (10/23/2018)</h1>
	<p><span id="instructions-section">Enter text</span> and then manually markup using the SSML data attribute format (described at:
		<a href="https://github.com/mhakkinen/SSMLinHTMLproposal">https://github.com/mhakkinen/SSMLinHTMLproposal</a>), by selecting the sample
		button below, or entering text,  then highlighting text, and selecting one of the SSML toolbar actions to be applied to the text.  The appropriate
		SSML JSON attribute will be added.  Once your text is ready, click the speak button.</p>
		<p>Your platform must have an speech synthesizer that supports SSML if you using Windows or other platforms with native SSML supporting synthesizers.
			If using MacOS, the JSON-ized SSML will be mapped to the Apple Speech markup.
		</p>
    <div>
	<button id="prosodyBTN" class="btn btn-info btn-xs">Prosody Fast</button> 
	<button id="prosodySlow" class="btn btn-warning btn-xs">Prosody slow</button> 
	<button id="strongVoice" class="btn btn-success btn-xs">Emphasis Strong</button>
	<button id="sayCardinal" class="btn btn-warning btn-xs">Say As Cardinal</button>
	<!--<button id="sayOrdinal" class="btn btn-default btn-xs">Say As Ordinal</button>-->
	<button id="sayChar" class="btn btn-info btn-xs">Say As Char</button>
	<button id="breakMedium" class="btn btn-warning btn-xs">Break</button>
	<button id="subAlias" class="btn btn-success btn-xs">Sub</button>
	
	
	<br>
	<textarea id="AuthoredText" class="form-control txt" aria-labeledby="instructions-section" rows="4" cols="50"></textarea>
	<br>
    
	</div>
	<div>
    	
		<button onclick="example1()" class="btn btn-primary btn-sm">JSON example 1</button>
		<button onclick="example2()" class="btn btn-primary btn-sm">JSON example 2</button>
		<button onclick="example3()" class="btn btn-primary btn-sm">Plain Text</button>
		<button onclick="clearText()" class="btn btn-danger btn-sm">Clear Text</button>
				
	</div>
	<div style="display:none;">
	<fieldset>
		<legend>Options for SSML markup</legend>
		<p>Some synthesizers may require wrapping the string with the &lt;speak&gt; 
		element, and some may require the <code>&lt;? xml ?&gt;</code> prefix.</p>
		<p>
			<span><label for="chkWrapSSML">Wrap text with SSML <code>&lt;speak&gt;</code>:</label>
			<input id="chkWrapSSML" type="checkbox" value="false"></span> 
			<span>
				&nbsp;<label for="chkXMLprefix">Prefix as XML:</label>
				<input id="chkXMLprefix" type="checkbox" value="false">
			</span>
		</p>
		
	</fieldset>

	<fieldset>
		<legend>Data-Attributes</legend>
		<p>
			<label for="chkDataAttr">Process data attribute encoded SSML:</label>
			<input id="chkDataAttr" type="checkbox" value="false">
		</p>
	</fieldset>

	<fieldset>
		<legend>Authoring content with JSON input atributes</legend>
		<p>
			<label for="chkJSONAttr">Process HTML with JSON to SSML:</label>
			<input id="chkJSONAttr" type="checkbox" value="false">
		</p>
	
	
	</fieldset>

</div>
	
	<fieldset>
	<legend>Speech Controls</legend>
    <p><button onclick="produceSpeech();" class="btn btn-primary">Start Reading</button> using
    <label for="synthesizerList">Synthesizer:</label>
   		<select id="synthesizerList"></select>
	
		   <!-- button to stop speech synth -->
		   <button id="stopButton" class="btn btn-danger">Stop Reading</button>
		
	</p>
	</fieldset>
	
    <fieldset>
    	<legend>
    		Visual Scratch Pad for processed text
		</legend>
		<div>Generated String to be synthesized (specific to platform: MacSpeech markup or SSML:</div>
		<div class="codebox" id="pstruct"></div>
		<div>JSON-ized SSML the above was generate from:</div>
        <div class="codebox" id="result"></div>
     	
	</fieldset>
	
    <script src="script-mac.js"></script>
	<!-- container for platform information -->
	<p id="platform">User Agent: Chrome 69 on MacIntel</p>
	<footer>Questions or comments to <a href="emailto:mhakkinen@ets.org">Mark Hakkinen</a> or <a href="emailto:iali@ets.org">Irfan Ali</a> </footer>

</div>	
<script type="text/javascript">
	var browserInfo = getBrowserInfo();
	document.getElementById("platform").innerHTML = "User Agent: " + browserInfo + " on "+ navigator.platform;
	


	function example1()
		{document.getElementById('AuthoredText').value="I am now <span data-ssml='{\"prosody\" : {\"rate\":\"x-fast\"}}'>speaking very fast</span> and now <span data-ssml='{\"break\": {\"strength\":\"strong\"}}'></span> at a normal rate. Now I am speaking <span data-ssml='{\"prosody\" : {\"rate\":\"slow\"}}'>very slow</span>.  If text is bolded <span data-ssml='{\"emphasis\" : {\"level\":\"strong\"}}'>it should be spoken with emphasis!</span>.  <span data-ssml='{\"say-as\" : {\"interpret-as\":\"cardinal\"}}'>80302</span> is large number while <span data-ssml='{\"say-as\" : {\"interpret-as\":\"cardinal\"}}'>80302</span> is also a zip code.";
			document.getElementById('chkJSONAttr').checked=true;

	}

	function example2()
		{document.getElementById('AuthoredText').value="He was born in <span data-ssml='{\"break\": {\"strength\":\"strong\"}}'></span> <span data-ssml='{\"say-as\": {\"interpret-as\":\"cardinal\"}}'><span data-ssml='{\"emphasis\" : {\"level\":\"strong\"}}'>1875</span></span> or <span data-ssml='{\"say-as\": {\"interpret-as\":\"characters\"}}'>1875</span>. Students were told to read one book before bed. My daughter <span data-ssml='{\"sub\": {\"alias\":\"red\"}}'>read</span> two, not just one. I need a little <span data-ssml='{\"break\": {\"strength\":\"weak\"}}'></span>break before I jump to another example. <span data-ssml='{\"sub\": {\"alias\":\"World Wide Web Consortium\"}}'>W3C</span> should have <span data-ssml='{\"sub\": {\"alias\":\"Speech Synthesis Markup Language\"}}'>SSML</span> support in HTML.";
			document.getElementById('chkJSONAttr').checked=true;

	}

	function example3()
		{document.getElementById('AuthoredText').value="The objective of the Spoken Presentation Task Force is to develop normative specifications and best practices 18789 guidance collaborating with other W3C groups as appropriate, to provide for proper pronunciation in HTML content when using text to speech (TTS) synthesis. SSML is actually more than just an exercise in floccinaucinihilipilification. in the following sequence of numbers, what would be the next number to occupy the blank: 111, 222, 333, --- ";
			document.getElementById('chkJSONAttr').checked=true;

	}
		
	function clearText() {
        document.getElementById("AuthoredText").value = "";
    }
	
</script>

	 </div>

</body>
</html>