juberti · juberti · Jun 5, 2025
diff --git a/realtime/index.html b/realtime/index.html
@@ -36,6 +36,10 @@
             <td>🤖 <a href="./basic/index.html">Voice Agent Demo</a></td>
           <td>Lets you chat with a simple voice agent.</td>
           </tr>
+          <tr>
+            <td>⏩ <a href="./speed/index.html">Speed Control Demo</a></td>
+            <td>Adjust speech speed while talking to the agent.</td>
+          </tr>
           <tr>
             <td>📓 <a href="./text/index.html">Voice to Text Agent Demo</a></td>
             <td>Lets you chat with an agent that listens to voice and replies with text.</td>

diff --git a/realtime/speed/index.html b/realtime/speed/index.html
@@ -0,0 +1,64 @@
+<html>
+  <head>
+    <title>Realtime Speed Demo</title>
+    <meta charset="utf-8">
+    <link rel="icon" href="../favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="../main.css">
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <a href="../index.html">Realtime Demos</a>
+        <span class="header-icon">⏩</span> <span class="header-title">Speed Control</span>
+      </div>
+      <div> 
+        This demo shows how to use the OpenAI <a href="https://platform.openai.com/docs/guides/realtime" target="_blank">Realtime API</a> to create an interactive voice agent.
+        Use the slider to control the speaking speed.
+      </div>
+      <div>
+        <label for="openai-api-key"><a href="https://platform.openai.com/settings/organization/api-keys" target="_blank">API Key</a></label>
+        <input id="openai-api-key" type="password" placeholder="Enter your OpenAI API key here"/>
+      </div>
+      <div>
+        <label for="model">Model</label>
+        <select id="model">
+          <option selected>gpt-4o-realtime-preview</option>
+          <option>gpt-4o-mini-realtime-preview</option>
+        </select>
+      </div>
+      <div>
+        <label for="voice">Voice</label>
+        <select id="voice">
+          <option selected>alloy</option>
+          <option>ash</option>
+          <option>ballad</option>
+          <option>coral</option>
+          <option>echo</option>
+          <option>sage</option>
+          <option>shimmer</option>
+          <option>verse</option>
+        </select>
+      </div>
+      <div>
+        <label for="speed">Speed</label>
+        <input id="speed" type="range" min="0.75" max="1.25" step="0.5" value="1"/>
+      </div>
+      <div>
+        <label for="instructions">Instructions</label>
+        <textarea id="instructions" rows="3"></textarea>
+      </div>
+      <div class="controls-row">
+        <div class="buttons-group">
+          <button id="start-microphone" onclick="startMicrophone()">Start Mic</button>            
+          <button id="stop" onclick="stop()">Stop</button>
+        </div>
+        <div class="status-indicator">
+          <span id="status"></span>
+        </div>   
+      </div>
+      <p class="github-link"><a href="https://github.com/juberti/demos/tree/main/realtime/speed">GitHub</a></p>
+    </div>
+    <script src="../session.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/realtime/speed/main.js b/realtime/speed/main.js
@@ -0,0 +1,103 @@
+const APP_PREFIX = "realtime/speed/";
+const $ = document.querySelector.bind(document);
+const apiKeyEl = $("#openai-api-key");
+const modelEl = $("#model");
+const voiceEl = $("#voice");
+const speedEl = $("#speed");
+const instructionsEl = $("#instructions");
+const startMicrophoneEl = $("#start-microphone");
+const stopEl = $("#stop");
+const statusEl = $("#status");
+const prefs = [apiKeyEl, modelEl, voiceEl, instructionsEl];
+
+let session = null;
+
+function initState() {
+  prefs.forEach(p => {
+    const fqid = p.id != "openai-api-key" ? APP_PREFIX + p.id : p.id;
+    const v = localStorage.getItem(fqid);
+    if (v) {
+      p.value = v;
+    }
+    p.addEventListener("change", () => {
+      localStorage.setItem(fqid, p.value);
+    });
+  });
+  const speedVal = localStorage.getItem(APP_PREFIX + "speed");
+  if (speedVal) {
+    speedEl.value = speedVal;
+  }
+  speedEl.addEventListener("change", handleSpeedChange);
+  updateState(false);
+}
+
+function updateState(started) {
+  statusEl.textContent = "";
+  prefs.forEach(p => p.disabled = started);
+  startMicrophoneEl.disabled = started;
+  stopEl.disabled = !started;
+}
+
+async function startMicrophone() {
+  if (!apiKeyEl.value) {
+    window.alert("Please enter your OpenAI API Key. You can obtain one from https://platform.openai.com/settings/organization/api-keys");
+    return;
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  start(stream);
+}
+
+async function start(stream) {
+  updateState(true);
+  session = new Session(apiKeyEl.value);
+  session.onconnectionstatechange = state => statusEl.textContent = state;
+  session.ontrack = e => handleTrack(e);
+  session.onopen = e => handleOpen();
+  session.onmessage = e => handleMessage(e);
+  session.onerror = e => handleError(e);
+  const sessionConfig = {
+    model: modelEl.value,
+    voice: voiceEl.value,
+    speed: parseFloat(speedEl.value),
+    instructions: instructionsEl.value || undefined
+  }
+  await session.start(stream, sessionConfig);
+}
+
+function stop() {
+  updateState(false);
+  session.stop();
+  session = null;
+}
+
+function handleTrack(e) {
+  const audio = new Audio();
+  audio.srcObject = e.streams[0];
+  audio.play();
+}
+
+function handleSpeedChange() {
+  localStorage.setItem(APP_PREFIX + "speed", speedEl.value);
+  if (session) {
+    const updateMessage = { type: "session.update", session: { speed: parseFloat(speedEl.value) } };
+    session.sendMessage(updateMessage);
+    const createResponse = { type: "response.create" };
+    session.sendMessage(createResponse);
+  }
+}
+
+function handleOpen() {
+  const message = { type: "response.create" };
+  session.sendMessage(message);
+}
+
+function handleMessage(message) {
+  console.log("message", message);
+}
+
+function handleError(e) {
+  console.error(e);
+  stop();
+} 
+
+initState();