Vanilla JS

Smooth Music Gallery Embed Builder

Configure your gallery options and generate a copy-paste embed snippet for any website.

Live Preview

Preview updates with the values selected in the builder.

No images added to gallery

0:000:00

Generated snippets

Paste in <head>

<link rel="stylesheet" href="https://music-gallery.smoothcdn.com/latest/theme/default.css">

<script src="https://music-gallery.smoothcdn.com/latest/core/smooth-music-gallery.js" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        initMusicGallery(document.querySelector('.smoothmg-gallery'))
    });
</script>

Paste where gallery should render

<div class="smoothmg-gallery" data-props='{"size":75,"background":"","background_options":{"background_color":"#0f172a","accent":"#0ea5e9","density":0.8,"opacity":0.4,"max_size":8,"min_size":2,"intensity":1.5},"overlay":"","overlay_options":{"opacity":0.9,"accent":"#0ea5e9"},"theme":"default","theme_options":{"accent":"#0ea5e9","frame_color":"#0a101d"},"slides_duration":2,"photos":[],"music":{"url":""}}'></div>