Adding audio to your blog

There are two practical ways to add audio to a blog: use the native <audio> element or render a custom player with JavaScript. The Zola theme Zolarwind provides two shortcodes that map to those choices: audio_simple uses the native element, audio uses a custom player. Both are usable as-is, and the choice comes down to how much control you want over the player UI.

The baseline native <audio>

You get built-in controls and good accessibility. If you are fine with browser-native styling, this is the fastest path.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

The tradeoff is consistency. Browsers style the element differently, and you get limited control over the UI.

audio_simple shortcode

This wraps the native element and keeps the setup small. It uses no JavaScript, like the baseline audio element, but adds a small amount of CSS for layout.

<div class="container max-w-md my-6 py-6 px-6 text-black dark:text-black bg-gradient-to-tr from-ok-600 to-primary-800 rounded-2xl overflow-hidden">
    <div class="text-center relative">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-16 w-16 inline-block">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
        </svg>
    </div>
    <div class="mb-6 text-center relative">
        <h2 class="inline-block font-medium">Audio in your blog</h2>
        <p class="inline-block font-medium text-sm">Female Speaker | Blog of Thomas Weitzel | 2026</p>
    </div>
    <audio controls src="audio.mp3" style="width: 100%">Your browser does not support the audio element.</audio>
</div>

Custom player

If you want a consistent player UI across browsers, the audio shortcode renders a custom player with JavaScript. The native <audio> controls are not used; the UI is fully custom.

<div
  class="container max-w-md my-6 py-6 px-6 text-black dark:text-black bg-gradient-to-tr from-primary-600 to-warn-800 rounded-2xl overflow-hidden"
  data-audio-id="1"
  data-audio-src="audio.mp3"
>
    <div class="text-center relative">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-16 w-16 inline-block">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
        </svg>
    </div>
    <div class="mb-6 text-center relative">
        <h2 class="inline-block font-medium">Audio in your blog</h2>
        <p class="inline-block font-medium text-sm">Female Speaker | Blog of Thomas Weitzel | 2026</p>
    </div>
    <div class="audio-controls1 flex space-x-1">
        <div class="play-div1 flex-none hover:text-fail-600">Loading ...</div>
        <div class="time-div1 flex-none pr-2">00:00 | 0:48</div>
        <div class="flex-auto cursor-pointer select-none mt-2">
            <div class="progress-container1 w-full bg-primary-700 rounded-full h-2 dark:bg-neutral-200">
                <div class="progress-bar1 bg-neutral-800 h-2 rounded-full hover:bg-fail-600" style="width: 0%"></div>
            </div>
        </div>
        <div class="speaker-div1 flex-none pl-2 hover:text-fail-600"></div>
    </div><script src="/js/audio/howler.js" integrity="sha384-B3AhJtVepaXjzRprLH6ZMkrOI+XDduqXmwhe4m+RDATUkM8o1I2STFsig6dra4XF"></script>
        <script src="/js/audio/audio-player.js" integrity="sha384-uM+RjXS/SiYym8NXLgoHFdNXVU0dZFjg9FyWhppQgkb0RJd1dnp7H+Pom5azyaMI"></script>
        <script src="/js/audio/audio-init.js" integrity="sha384-MxFc2CYeIiCM4XDzrORmIy9R06BD/FQLTHq71ZIlTY/tJCqi3Isa8/o+yKSFg1Vc"></script></div>

I prefer the audio shortcode, because I want a stable player UI across browsers. audio_simple stays in the toolbox because it keeps the setup small and uses no extra JavaScript.

Notes

• The shortcodes expect local assets, not remote URLs.
• zola serve does not support range requests as of 0.22.1, so Chrome cannot seek properly. Use a static server for testing.