What does this tool do
The Media Player plays audio and video files from your device. Build a playlist via file picker or drag-and-drop, jump to tracks by clicking, control play/pause, seek, volume, and repeat (none, all, one). Shuffle mode randomises playback order. All playback happens in the browser—no upload, no server. Uses blob URLs to load files from memory.
How to use it
- Add files — Click to select or drag and drop audio/video files (MP3, MP4, etc.).
- Build playlist — Files appear in the playlist. Click a track to play it.
- Control — Play, pause, seek, volume. Use repeat to loop none, all, or the current track.
- Shuffle — Enable shuffle for randomised order (Fisher-Yates).
- Remove — Remove tracks from the playlist. Blob URLs are revoked to free memory.
- Full-screen — Use video full-screen when available.
How it works
Each file is wrapped as a MediaItem (File reference, display name, type, blob URL). URL.createObjectURL(file) creates a temporary blob URL used by the HTML5 video element. No media content is sent to any server. When a playlist item is removed or the component unmounts, URL.revokeObjectURL() is called to prevent memory leaks. Shuffle uses Fisher-Yates for uniformly random order. Repeat modes: none (stop after last), all (wrap to first), one (loop current).
All computation runs entirely in your browser. No data is sent to any server.
Use cases & examples
- Local music — Play MP3s from your device.
- Video preview — Quick view of local video files.
- Podcasts — Queue and play episodes.
- Presentations — Play background audio or video clips.
- Testing — Verify media files play correctly.
Example
- Add song1.mp3, song2.mp3 → Playlist with two tracks.
- Shuffle on → Playback order randomised.
- Repeat: one → Current track loops until changed.
Limitations & known constraints
- Format support — Depends on browser and OS (e.g. MP4, WebM, MP3).
- Blob URLs — Must be revoked on remove/unmount to avoid leaks.
- No streaming — Files are loaded into memory; very large files may be slow.
- Same-origin — Blob URLs are same-origin; no cross-origin media.