Upload 3 files

index.html

@@ -417,6 +417,10 @@
                                     <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
                                     <span>Gemini</span>
                                 </button>
+                                <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
+                                    <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
+                                    <span>Microsoft</span>
+                                </button>
                             </div>
                             <p class="text-handling-sample">
                                 The startup secured <span class="text-highlight">$5.2M</span> in venture capital,<br>
@@ -457,6 +461,10 @@
                                     <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
                                     <span>Gemini</span>
                                 </button>
+                                <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
+                                    <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
+                                    <span>Microsoft</span>
+                                </button>
                             </div>
                             <p class="text-handling-sample">
                                 The train delay was announced at <span class="text-highlight">4:45 PM</span> on
@@ -497,6 +505,10 @@
                                     <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
                                     <span>Gemini</span>
                                 </button>
+                                <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
+                                    <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
+                                    <span>Microsoft</span>
+                                </button>
                             </div>
                             <p class="text-handling-sample">
                                 You can reach the hotel front desk at <span class="text-highlight">(212) 555-0142 ext. 402</span> anytime.
@@ -536,6 +548,10 @@
                                     <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
                                     <span>Gemini</span>
                                 </button>
+                                <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
+                                    <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
+                                    <span>Microsoft</span>
+                                </button>
                             </div>
                             <p class="text-handling-sample">
                                 Our drone battery lasts <span class="text-highlight">2.3h</span> when flying at

script.js

@@ -3712,6 +3712,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 return 'openai';
             case 'gemini':
                 return 'gemini';
+            case 'microsoft':
+                return 'microsoft';
             default:
                 return normalized;
         }
@@ -3737,7 +3739,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function getOrCreateTextHandlingAudio(cardState, providerSlug) {
         if (!cardState.audioElements.has(providerSlug)) {
-            const audioPath = `audio/${providerSlug}_speech-${cardState.audioNumber}.mp3`;
+            // Microsoft uses .wav files, others use .mp3
+            const audioExtension = providerSlug === 'microsoft' ? 'wav' : 'mp3';
+            const audioPath = `audio/${providerSlug}_speech-${cardState.audioNumber}.${audioExtension}`;
             const audioEl = new Audio(audioPath);
             audioEl.preload = 'auto';
             audioEl.addEventListener('ended', () => handleTextHandlingAudioEnded(cardState, audioEl));
@@ -3922,6 +3926,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 return getComputedStyle(document.documentElement).getPropertyValue('--brand-openai') || '#52a584';
             case 'Gemini':
                 return getComputedStyle(document.documentElement).getPropertyValue('--brand-gemini') || '#887eca';
+            case 'Microsoft':
+                return getComputedStyle(document.documentElement).getPropertyValue('--brand-microsoft') || '#00A4EF';
             default:
                 return getComputedStyle(document.documentElement).getPropertyValue('--primary') || '#227CFF';
         }
@@ -3937,6 +3943,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 return 'TTS-1';
             case 'gemini':
                 return '2.5 Flash TTS';
+            case 'microsoft':
+                return 'VibeVoice Realtime 0.5B';
             default:
                 return provider || 'Supertonic';
         }

styles.css

@@ -742,7 +742,7 @@ section {
 .comparison-text p {
     text-align: center;
     line-height: 1.2rem;
-    font-size: 0.8rem;
+    font-size: 16px;
     font-family: var(--font-body);
 }
 
@@ -2194,6 +2194,11 @@ body.comparison-mode .demo-result-item {
     height: 100%;
 }
 
+.provider-option[data-provider="Microsoft"] .provider-option-icon {
+    width: 72.25%;
+    height: 72.25%;
+}
+
 .text-handling-player {
     width: 3rem;
     height: 3rem;