Home
0:00 / 0:00

I have implemented the "Add Audio" feature in the Writer's Studio inspector. This allows you to drag and drop or click to add an audio file to any document, play it directly in the inspector, and have it automatically included when publishing to Eleventy.


Key Changes:
Database Upgrade: Added an audio_file column to the documents table to persist the audio data (stored as base64).
Inspector UI (index.html):
Added a new "Add Audio" section below the Cover Image field.
Implemented a drag-and-drop/click zone for audio files.
Integrated a native audio player that appears once a file is added.
Added a "Remove Audio" button for easy management.
UI Service (ui.js):
Mapped the new audio elements.
Updated the inspector to load and display audio when selecting a document.
Ensured audio controls are disabled when no document is selected.
Backend API (server.js):
Updated the POST and PUT routes to handle the audio_file field.
Enhanced the Publishing route to pass the audio data to the Eleventy exporter.
Frontend Logic (writer_v2.js):
Added event listeners for audio file selection and drag-and-drop.
Implemented automatic saving when an audio file is added or removed.
Eleventy Publishing (eleventy_mcp.py):
Added logic to save the uploaded audio file into the post's local assets/ folder.
Automatically inserts the audioPlayer "assets/..." shortcode into the published markdown file.
How to use:
Open the Inspector panel.
Locate the "Add Audio" field.
Drag and drop an MP3/WAV/OGG file or click to select one.
The player will appear, allowing you to listen to the audio.
Click "Publish to 11ty" to export the post with the audio player included.
The duplication feature also correctly replicates the audio file when you duplicate a document or folder.

Comments & Ratings

Leave a Comment

#

Loading ratings...

Loading comments...