voice: add global playback speed control for audio and voice

web/src/components/MessageList.tsx

@@ -1340,6 +1340,8 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
   const playTrack = useAudioPlayerStore((s) => s.playTrack);
   const togglePlayGlobal = useAudioPlayerStore((s) => s.togglePlay);
   const seekToGlobal = useAudioPlayerStore((s) => s.seekTo);
+  const playbackRate = useAudioPlayerStore((s) => s.playbackRate);
+  const cyclePlaybackRate = useAudioPlayerStore((s) => s.cyclePlaybackRate);
 
   const isActiveTrack = track?.src === src;
   const isPlaying = isActiveTrack && isPlayingGlobal;
@@ -1391,6 +1393,13 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
         <span className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-slate-800 px-1 text-[10px] text-slate-300">
           ♪
         </span>
+        <button
+          className="inline-flex h-6 min-w-8 items-center justify-center rounded-full bg-slate-800 px-1 text-[10px] text-slate-300 hover:bg-slate-700"
+          onClick={() => cyclePlaybackRate()}
+          type="button"
+        >
+          {playbackRate}x
+        </button>
       </div>
     </div>
   );
@@ -1412,6 +1421,8 @@ function VoiceInlinePlayer({
   const playTrack = useAudioPlayerStore((s) => s.playTrack);
   const togglePlayGlobal = useAudioPlayerStore((s) => s.togglePlay);
   const seekToGlobal = useAudioPlayerStore((s) => s.seekTo);
+  const playbackRate = useAudioPlayerStore((s) => s.playbackRate);
+  const cyclePlaybackRate = useAudioPlayerStore((s) => s.cyclePlaybackRate);
 
   const isActiveTrack = track?.src === src;
   const isPlaying = isActiveTrack && isPlayingGlobal;
@@ -1461,6 +1472,13 @@ function VoiceInlinePlayer({
       <span className="w-10 text-right text-[11px] tabular-nums text-slate-200">
         {formatAudioTime(duration > 0 ? duration : position)}
       </span>
+      <button
+        className="inline-flex h-6 min-w-8 items-center justify-center rounded-full bg-slate-800 px-1 text-[10px] text-slate-300 hover:bg-slate-700"
+        onClick={() => cyclePlaybackRate()}
+        type="button"
+      >
+        {playbackRate}x
+      </button>
     </div>
   );
 }