feat: integrate audio waveform visualizer inside trim controls

[Abhishek2005-ard]

Description

This PR integrates a highly-requested audio enhancement feature: a visual audio waveform rendered directly above the video timeline trim controls. This helps content creators make extremely precise cuts and edits by visually identifying active dialogues, music beats, and silent pauses in their uploaded video files.

Key Changes

• Trim Control Integration: Embedded the <WaveformCanvas> component inside TrimControl.tsx directly above the trim range slider, visualising audio amplitude across the video’s timeline.
• Asynchronous Audio Decoding: The underlying hooks leverage the browser's Web Audio API (AudioContext.decodeAudioData) to process audio tracks asynchronously, preserving UI responsiveness.
• Visual & Alignment Polish:
  • Aligned the waveform canvas to perfectly map 1:1 with the trim handles on the track slider below.
  • Implemented an elegant skeleton loading wave animation while the audio is being decoded.
  • Renders a clean flat dotted purple line at the center of the track for silent/audio-less video clips.

Testing & Validation

• Verified on a real browser using a high-quality video screen recording.
• Confirmed the waveform loads asynchronously without blocking the React main thread.
• Verified that the range slider handles map accurately to the timeline peaks.
• Ensured there are no conditional hook rendering violations or hydration failures.

ScreenRecord:-

Screen.Recording.2026-05-23.232253.mp4

close #1027

[vercel]

@Abhishek2005-ard is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @Abhishek2005-ard!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @Abhishek2005-ard

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[Abhishek2005-ard]

@magic-peach
pls review this pr when you have time

[magic-peach]

@Abhishek2005-ard The audio waveform visualizer integration looks well-done — good alignment with the trim handles, skeleton loading state, and proper async decoding.

However, there are issues that need to be fixed before this can merge:

1. Binary test file committed: The PR includes test.mp4 in the repository root. Binary media files should never be committed to the repo. Please remove it:

   git rm test.mp4
   git commit -m 'chore: remove test.mp4 binary'
   git push

2. CI not triggered: Only validate/label/welcome ran — build, lint, and typecheck did not run. Removing the binary and pushing will re-trigger CI.

Please fix these and I'll review again!

[Abhishek2005-ard]

@magic-peach
pls review this pr when you have time

[Abhishek2005-ard]

@magic-peach
I am already resolve the issue that you suggested pls review it

[Abhishek2005-ard]

@magic-peach
Pls review the pr to comfirm