feat: add animated image and audio player support

README.md

@@ -1,13 +1,15 @@
 # @source/player
 
-`@source/player` is a modular, highly customizable React video player library for VOD and live streaming workflows.
+`@source/player` is a modular, highly customizable React media player library for VOD, live streaming, animated images, and audio playback workflows.
 
-Current package version: `3.1.0`.
+Current package version: `3.2.0`.
 
 ## Why this player
 
-- React-first component architecture (`VideoPlayer`, `PlayerProvider`, `usePlayerContext`)
+- React-first component architecture (`VideoPlayer`, `AudioPlayer`, `PlayerProvider`, `usePlayerContext`)
 - Protocol-aware playback with automatic detection (`native`, `hls`, `rtmp/flv`, `mpegts`)
+- Built-in animated image support (`.gif`, `.webp`, `.apng`, `.avif`) with minimal render path
+- Dedicated audio player component for `.mp3`, `.wav`, `.flac`, `.m4a`, and similar formats
 - Runtime loading for streaming engines (`hls.js`, `flv.js`, `mpegts.js`) with CDN fallback
 - Built-in settings UI for speed, quality, audio track, subtitles, and subtitle style editor
 - Slot-style customization (`children`, `controlsLeftExtra`, `controlsRightExtra`)
@@ -113,11 +115,31 @@ export function App() {
 />
 ```
 
+### 6. Animated image playback (GIF / WebP / APNG / AVIF)
+
+```tsx
+<VideoPlayer src="https://cdn.example.com/loop.gif" />
+```
+
+### 7. Dedicated audio player
+
+```tsx
+import { AudioPlayer } from '@source/player'
+
+<AudioPlayer
+  src="https://cdn.example.com/podcast-episode.mp3"
+  title="Episode 12"
+  subtitle="Weekly Tech Podcast"
+  artwork="https://cdn.example.com/episode-cover.jpg"
+  playbackRates={[0.75, 1, 1.25, 1.5, 2]}
+/>
+```
+
 ## API at a glance
 
 Key `VideoPlayer` props:
 
-- Playback: `src`, `protocol`, `autoplay`, `loop`, `muted`, `volume`, `playbackRate`, `currentTime`
+- Playback: `src`, `mediaType`, `protocol`, `autoplay`, `loop`, `muted`, `volume`, `playbackRate`, `currentTime`
 - Media element config: `crossOrigin`, `preload`, `playsInline`, `controlsList`
 - UI toggles: `controls`, `keyboardShortcuts`, `pictureInPicture`
 - Customization: `theme`, `className`, `style`, `aspectRatio`, `playbackRates`
@@ -127,6 +149,13 @@ Key `VideoPlayer` props:
 - Localization: `language`, `translations`
 - Events: `onPlay`, `onPause`, `onEnded`, `onTimeUpdate`, `onError`, `onQualityChange`, `onBufferStart`, `onBufferEnd`, `onFirstPlay`, and more
 
+Key `AudioPlayer` props:
+
+- Source + playback: `src`, `autoplay`, `loop`, `muted`, `volume`, `playbackRate`, `currentTime`
+- UI + customization: `controls`, `keyboardShortcuts`, `playbackRates`, `theme`, `className`, `style`
+- Metadata + slots: `title`, `subtitle`, `artwork`, `children`, `controlsLeftExtra`, `controlsRightExtra`
+- Localization + events: `language`, `translations`, `onPlay`, `onPause`, `onTimeUpdate`, `onError`, and more
+
 ## Imperative control via ref
 
 ```tsx
@@ -151,6 +180,7 @@ export function PlayerWithRef() {
 
 ```ts
 import {
+  AudioPlayer,
   PlayerErrorBoundary,
   PlayerProvider,
   usePlayerContext,
@@ -165,6 +195,9 @@ import {
   checkVideoCORS,
   initializePolyfills,
   features,
+  detectPlayerMediaType,
+  isAnimatedImageSource,
+  isAudioSource,
   getTranslations,
   detectBrowserLanguage,
 } from '@source/player'
@@ -175,7 +208,9 @@ import {
 For complete details, see `DOCUMENTATION.md`:
 
 - Full `VideoPlayerProps` and event reference
+- Full `AudioPlayerProps` and event reference
 - Streaming architecture (HLS/RTMP-FLV/MPEG-TS)
+- Animated image detection and render behavior
 - Subtitle rendering and style editor internals
 - Theme tokens and CSS variable mapping
 - Keyboard and touch behavior