TUTORIAL

How to Customize Your Audio GalleryThis is a quick guide for anyone who wants to change the card color, play button color, and audio track in plain HTML/CSS.---1️⃣ Find the code here:
Open the Embed element "Audio gallery plugin" and find this section in your code:
<style>
.audio-card {
background: white; /* card background color */
}
.play-btn {
background-color: #007bff; /* play button circle color */
}
.play-btn.paused {
background-color: #ff3b3b; /* pause button color */
}
</style>
---2️⃣ Change the card background colorYou can use color names, HEX, RGB, or gradient values.
.audio-card {
background: #fef9e7; /* soft yellow */
}
💡 Example: Try #222 for dark mode or #e3f2fd for a light blue tone.---3️⃣ Adjust the play button circle colorChange this line inside .play-btn to your preferred color:
.play-btn {
background-color: #28a745; /* green play button */
}
💡 Tip: Keep contrast high so the white ▶ icon stays visible.---4️⃣ Switch the music track (MP3 URL)Scroll down to the <audio> section inside each .audio-card.
Replace the old link with your new track URL inside the src="" quotes.
<audio src="https://www.openmusicarchive.org/audio/April_Kisses.mp3"></audio>
👉 Example:html
<audio src="https://example.com/music/mysong.mp3"></audio>
Make sure the new link is direct to an MP3 file (ends with .mp3) and is publicly accessible.---Now just save your changes and refresh the page — your new colors and audio track should appear immediately! 🎨🎶