Add canvas + audio recording feature with Start/Stop buttons

[Sauve9119]

fix #1673

This PR adds a new feature to record the Music Blocks canvas animation along with audio as a video (.webm). This helps users, especially students, to export their mouse artwork and music performance as a downloadable video file.

What was added?

• Added two new buttons:
  • 🎥 "Start Recording"
  • ⏹️ "Stop Recording"
• Used canvas.captureStream() and audioContext.destination.stream to create a combined media stream.
• Used MediaRecorder to capture and save the output as a downloadable .webm video file.

Files Modified

• js/activity.js

Motivation

This solves [Issue #1673 ] which requested the ability to record the canvas drawing and music together into a video format (e.g., MP4/WebM) for easy sharing or documentation.

Demo

You can test the feature by:

1. Opening Music Blocks in browser (http://127.0.0.1:3000/)
2. Creating some music + mouse animations
3. Clicking "Start Recording", then "Stop Recording"
4. A .webm file will automatically download

---

Let me know if any improvements are needed. I'm happy to make further changes.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.