diff --git a/demo/assets/audio.svg b/demo/assets/audio.svg
new file mode 100644
index 0000000..c9a4e13
--- /dev/null
+++ b/demo/assets/audio.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+ <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" fill="#555"/>
+</svg>
diff --git a/demo/assets/hyparquet.mp3 b/demo/assets/hyparquet.mp3
new file mode 100644
index 0000000..17716e9
Binary files /dev/null and b/demo/assets/hyparquet.mp3 differ
diff --git a/demo/demo.css b/demo/demo.css
index a37b830..2d8a271 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -27,6 +27,14 @@ code {
   white-space: pre-wrap;
   word-break: break-all;
 }
+sub {
+  align-items: center;
+  display: flex;
+  gap: 5px;
+}
+sub img {
+  cursor: pointer;
+}
 
 .error {
   color: #c11;
@@ -252,7 +260,6 @@ main,
   color: #444;
   margin: 10px;
   padding: 10px;
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   flex: 1;
diff --git a/demo/demo.js b/demo/demo.js
index 117a58e..34efe34 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -8,6 +8,5 @@ if (!app) throw new Error('missing app element')
 const params = new URLSearchParams(location.search)
 const url = params.get('key') || undefined
 
-// @ts-expect-error TODO: fix react createRoot type
-const root = ReactDOM.createRoot(document.getElementById('app'))
+const root = ReactDOM.createRoot(app)
 root.render(React.createElement(App, { url }))
diff --git a/index.html b/index.html
index 18570e1..230675a 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,11 @@
       <div id="app"></div>
       <div id="welcome">
         <h1>hyparquet</h1>
-        <sub>/haɪ pɑːrˈkeɪ/</sub>
+        <sub>
+          /haɪ pɑːrˈkeɪ/
+          <img src="demo/assets/audio.svg" alt="play hyparquet pronunciation" height="18" width="18" onclick="audio.play()">
+        </sub>
+        <audio id="audio" src="demo/assets/hyparquet.mp3"></audio>
         <h2>in-browser parquet file reader</h2>
         <p>
           <a href="https://www.npmjs.com/package/hyparquet"><img src="https://img.shields.io/npm/v/hyparquet" alt="npm hyparquet"></a>
diff --git a/package.json b/package.json
index ce5f7dc..91bae8a 100644
--- a/package.json
+++ b/package.json
@@ -33,9 +33,9 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
     "@types/node": "22.5.5",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.6",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.5.0",
+    "@typescript-eslint/eslint-plugin": "8.6.0",
     "@vitest/coverage-v8": "2.1.1",
     "eslint": "8.57.0",
     "eslint-plugin-import": "2.30.0",