Media
Audio Player
A custom audio player — single track or playlist, with cover art and several designs.
Live demo
See it in action
Sunrise DriveSoundHelix
0:00/0:00
- 1
- 2
- 3
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="audio-player ap-102782a0 fw-ap fw-ap--design-card design-card rounded" data-ap data-autoplay="0" data-loop="0">
<audio class="fw-ap__audio" preload="metadata">
</audio>
<div class="fw-ap__player">
<div class="fw-ap__cover">
<img class="fw-ap__cover-img" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-244b390ec455.jpg" alt="" />
<span class="fw-ap__cover-note" aria-hidden="true">♫</span>
</div>
<div class="fw-ap__main">
<div class="fw-ap__info">
<span class="fw-ap__title">Sunrise Drive</span>
<span class="fw-ap__artist">SoundHelix</span>
</div>
<div class="fw-ap__controls">
<button type="button" class="fw-ap__btn fw-ap__play" aria-label="Play"><span class="fw-ap__i-play"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></span><span class="fw-ap__i-pause"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h3v14H7zM14 5h3v14h-3z"/></svg></span></button>
<div class="fw-ap__bar">
<div class="fw-ap__progress" role="slider" tabindex="0" aria-label="Seek" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="fw-ap__buffered">
</div>
<div class="fw-ap__played">
</div>
<div class="fw-ap__handle">
</div>
</div>
</div>
<span class="fw-ap__time"><span class="fw-ap__cur">0:00</span><span class="fw-ap__sep">/</span><span class="fw-ap__dur">0:00</span></span>
<div class="fw-ap__volwrap">
<button type="button" class="fw-ap__btn fw-ap__volbtn" aria-label="Mute"><span class="fw-ap__i-vol"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4h4l5 5V5L7 10zM16 12a4 4 0 00-2-3.46v6.92A4 4 0 0016 12z"/></svg></span><span class="fw-ap__i-mute"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4h4l5 5V5L7 10zM19 12l2 2m0-4l-2 2m-2-2l4 4m0-4l-4 4" stroke="currentColor" stroke-width="2" fill="none"/></svg></span></button>
<input type="range" class="fw-ap__vol" min="0" max="1" step="0.05" value="1" aria-label="Volume" />
</div>
</div>
</div>
</div>
<ol class="fw-ap__list">
<li class="fw-ap__track is-active" data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" data-title="Sunrise Drive" data-artist="SoundHelix" data-cover="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-244b390ec455.jpg"><span class="fw-ap__track-num">1</span><img class="fw-ap__track-cover" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-244b390ec455.jpg" alt="" loading="lazy" /><span class="fw-ap__track-meta"><span class="fw-ap__track-title">Sunrise Drive</span><span class="fw-ap__track-artist">SoundHelix</span></span><span class="fw-ap__track-dur"></span></li>
</ol>
</div>
</div>
</div>
</div>
</section>To learn more about the Audio Player shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.