Dr.C - Memory Maker

Version 3.0 - Folder-based multimedia slideshow creator

What's New in This Version

Features

• ✅ Folder-based Save/Load - Save large projects without file size limits
• ✅ Music Timer - Automatic song transitions (1-600 seconds)
• ✅ Video Controls - Mute and Play-to-End checkboxes for all videos
• ✅ Background Videos - Full support with controls
• ✅ Opacity Control - Layering effects for foreground media
• ✅ Master Play/Pause - Controls all media simultaneously

Files

• MemoryMaker.html - Main application (single file, no server needed)

Quick Start

1. Open MemoryMaker.html in Chrome or Edge
2. Add Sections - Click "Add Section" button
3. Upload Media - Drag images/videos to each section
4. Save Project - Use "📁 Save as Folder" for large projects
5. Start Slideshow - Click "▶ Start Slideshow"

Debugging Issues

If "Next Section" Button Doesn't Work:

1. Open Developer Console (F12 → Console tab)
2. Start Slideshow
3. Look for this message:

   === SLIDESHOW STARTING ===
   Total sections with media: X
   Section 0: "Section Name" { images: X, videos: X, ... }
   

Problem: If you only see 1 section listed, only 1 section has media loaded.

Solution: Check if all media files were loaded correctly:

• Look for "Loaded section X: ..." messages when loading from folder
• Look for "Missing media file: ..." warnings
• Verify folder structure:

  ProjectFolder/
  ├── project.json
  ├── media/
  │   └── (image and video files)
  └── audio/
      └── (audio files)
  

4. When clicking "Next Section", look for:

   showNextSection called - current index: 0
   Moving to section index: 1
   Section data: {...}
   

Problem: If you don't see these messages, the button is disabled.

Why: Button disables when only 1 section has media (by design).

If Videos Play to End (Ignoring Timer):

1. Open Console and look for:

   Video "video.mp4" using transition speed: 3s - will be interrupted
   

Problem: If you see "set to play to end" instead, the checkbox is checked.

Solution:

• In the editor, uncheck "Play to end" on the video
• Default timer is the section's "Sec/Media" setting (1-60 seconds)

2. Check video settings in editor:
   • Each video has checkboxes at the bottom of its thumbnail
   • ☐ Mute - Controls audio during slideshow
   • ☐ Play to end - If checked, ignores timer and plays full video

Save Formats

💾 Save Project (JSON)

• Use for: Small projects (< 50 MB)
• Format: Single .json file with embedded media
• Compatible: All browsers

📁 Save as Folder

• Use for: Large projects (any size)
• Format: Folder with separate media files
• Compatible: Chrome, Edge, Opera (not Firefox/Safari yet)
• Structure:

  MemoryMaker_2026-03-10T14-30-00/
  ├── project.json          (settings only)
  ├── media/                (images + videos)
  └── audio/                (music files)
  

Common Console Messages

Normal Operation:

=== SLIDESHOW STARTING ===
Total sections with media: 3
Section 0: "Vacation 2024" { images: 5, videos: 2, ... }
...

Loading from Folder:

Loaded media: media_0_photo.jpg -> photo.jpg
Loaded section 1: "Title" with 3 media, 1 backgrounds, 2 audio
Total sections loaded: 3

Section Navigation:

showNextSection called - current index: 0
Moving to section index: 1
showSlideshowImage called - section index: 1
Current section: "Section 2" media count: 4

Video Playback:

Video "clip.mp4" using transition speed: 5s - will be interrupted
Creating video: clip.mp4 Muted: false Video.muted: false
Video loaded successfully: clip.mp4

Troubleshooting

Next Section Button Disabled

• Cause: Only 1 section has media files
• Check: Console shows "Total sections with media: 1"
• Fix: Ensure other sections have uploaded media

Videos Play Full Length

• Cause: "Play to end" checkbox is checked
• Check: Console shows "set to play to end"
• Fix: Uncheck "Play to end" in editor

Missing Media After Load

• Cause: Files not found in folder
• Check: Console shows "Missing media file: ..."
• Fix: Verify folder structure and file names

Play/Pause Not Working

• Cause: Browser compatibility or audio context
• Check: Console for errors
• Fix: Use Chrome or Edge, ensure user interaction before playback

Browser Compatibility

Feature	Chrome	Edge	Firefox	Safari
Basic Slideshow	✅	✅	✅	✅
JSON Save/Load	✅	✅	✅	✅
Folder Save/Load	✅	✅	❌	❌
Audio Playback	✅	✅	✅	✅

Controls Reference

Editor Controls:

• Front Image (green) - Upload foreground images
• Front Video (blue) - Upload foreground videos
• Back Image (purple) - Upload background images
• Back Video (deep purple) - Upload background videos
• Music (orange-red) - Upload audio files
• Music Timer - Seconds before next song (1-600)

Slideshow Controls:

Row 1:

• Opacity slider - Foreground transparency
• ◀ Prev Front / Next Front ▶ - Navigate foreground media
• Pause (blue) - Master play/pause
• ◀ Prev Back / Next Back ▶ - Navigate background media

Row 2:

• ◀ Prev Section / Next Section ▶ - Navigate sections

Row 3:

• Music volume - Music playback volume
• ◀ Prev Song - Previous song
• Pause Music (blue) - Music play/pause
• Next Song ▶ - Next song
• Video volume - Video playback volume

Keyboard Shortcuts (Slideshow):

• Left/Right Arrows - Navigate media within section
• Up/Down Arrows - Navigate between sections
• Spacebar - Play/Pause slideshow
• M - Toggle music play/pause
• H - Show/Hide controls
• C - Show/Hide caption
• Escape - Close slideshow

Technical Details

Data Model

• Version 2.0 - JSON format (embedded media as base64)
• Version 3.0 - Folder format (separate files with JSON settings)

Media Types Supported

• Images: JPG, PNG, GIF, WebP, HEIC
• Videos: MP4, WebM, Ogg
• Audio: MP3, WAV, OGG, M4A

Performance Notes

• Large videos (>50 MB) load faster from folders
• Base64 encoding increases file size by ~33%
• Recommended project size: < 200 MB for JSON, unlimited for folders

Support

If you encounter issues:

1. Check the browser console (F12)
2. Look for error messages or warnings
3. Verify your folder structure matches the expected format
4. Try using "Save Project (JSON)" as a backup method

---

Created by: Dr.C (Claude)
Last Updated: March 10, 2026
License: Open Source