ElevenLabs MSE

by juberti

HTML

<textarea cols="80" rows="6" id="input">
His palms are sweaty, knees weak, arms are heavy
There's vomit on his sweater already, mom's spaghetti
</textarea>
<audio id="audio" autoplay></audio>
<div>
<button onclick="ttsEleven(input.value, audio)">
<b>ElevenLabs</b>
</button>&nbsp;<span id="eleven_latency"></span>
</div>
<div>
<button onclick="ttsAzure(input.value, audio)">
<b>Azure</b>
</button>&nbsp;<span id="azure_latency"></span>
</div>
<div>
<button onclick="ttsAws(input.value, audio)">
<b>Polly</b>
</button>&nbsp;<span id="aws_latency"></span>
</div>
<div>
He's nervous, but on the surface he looks calm and ready
To drop bombs, but he keeps on forgetting
What he wrote down, the whole crowd goes so loud
He opens his mouth, but the words won't come out
</div>

TypeScript

async function getAzureToken(apiKey: string) {
	console.log("getting token");
	const response = await fetch("https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken", { method: "POST", headers: {"Ocp-Apim-Subscription-Key": apiKey}});
  console.log("got response");
  return await response.text();
}

function generate(text: string, audioElement) {
	var mediaSource = new MediaSource();
  audioElement.src = window.URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', () => {
  	sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
    sourceBuffer.mode = 'sequence';
    //sourceBuffer.addEventListener('updateend', nextSegment);
    ttsEleven(text, audioElement, mediaSource, sourceBuffer);
    ttsAzure(text, audioElement);
		//audioElement.play();
  }
}

async function ttsEleven(text: string, audioElement, mediaSource, sourceBuffer) {
	const startTime = performance.now();
	const latencyMode = 22;
	const voiceId: string = "21m00Tcm4TlvDq8ikWAM";
	const apiKey: string = "ea97927d6adcead9be58ade42dbfd13b";
	const url: string = `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}/stream?optimize_streaming_latency=${latencyMode}`;
	const headers: HeadersInit = {
  	'Accept': 'audio/mpeg',
	  'xi-api-key': apiKey,
  	'Content-Type': 'application/json',
	};
	const body: string = JSON.stringify({
  	text: text,
	  model_id: "eleven_monolingual_v1",
  	voice_settings: {
    	stability: 0.5,
	    similarity_boost: 0.5,
  	},
	});
  console.log('fetching');
	const response = await fetch(url, {
  	method: 'POST',
	  headers,
  	body,
	})
  console.log('got response');
  if (response.ok) {
    if (1) {
      eleven_latency.innerHTML = Math.floor(performance.now() - startTime).toString() + " ms";
      const blob = await response.blob();
      console.log('got blob');
     
	    audioElement.src = URL.createObjectURL(blob);
  	  audioElement.play();
    } else {
   		eleven_latency.innerHTML = Math.floor(performance.now() -...