audio_player-1.0.x-dev/templates/single-audio/skin-nine.html.twig

<div class="audio-main-container">
  {% for audio in audios %}
    {% set original_url = audio.original_url %}

    <div class="audio-player skin-nine audio-player--fancy-layout {{ palette }}">
        <audio class="audio-player__my-audio" src="{{ original_url }}"></audio>

        <div class="audio-player__song-info audio-player__fancy-effect">
            <div class="audio-player__thumbnail-wrapper">
                <div class="audio-player__song-thumbnail">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-8z"/></svg>
                </div>
            </div>
            <div class="audio-player__song-details">
                <div class="audio-player__song-name"></div>
                <div class="audio-player__artist-name"></div>
            </div>
        </div>

        <div class="audio-player__progress-section">
            <div class="audio-player__progress-container">
                <div class="audio-player__buffered-bar audio-player__buffered-bar"></div>
                <div class="audio-player__progress-bar audio-player__progress-bar"></div>
            </div>
            <div class="audio-player__time-display">
                <span class="audio-player__current-time">0:00</span> / <span class="audio-player__total-time">0:00</span>
            </div>
        </div>

        <div class="audio-player__main-controls-fancy">
            <button class="audio-player__control-btn audio-player__rewind-btn audio-player__fancy-btn">
                <div class="audio-player__icon-wrapper">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg>
                </div>
            </button>
            <button class="audio-player__control-btn audio-player__play-pause-btn audio-player__play audio-player__fancy-btn audio-player__large-btn">
                <div class="audio-player__icon-wrapper">
                    <svg class="audio-player__play-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                    <svg class="audio-player__pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                </div>
            </button>
            <button class="audio-player__control-btn audio-player__fast-forward-btn audio-player__fancy-btn">
                <div class="audio-player__icon-wrapper">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M13 6v12l8.5-6L13 6zm-9 0v12l8.5-6L4 6z"/></svg>
                </div>
            </button>
        </div>

        <div class="audio-player__bottom-utility-controls audio-player__fancy-effect">
            <div class="audio-player__volume-controls">
                <button class="audio-player__control-btn audio-player__mute-unmute-btn audio-player__fancy-btn audio-player__small-btn">
                    <div class="audio-player__icon-wrapper">
                        <svg class="audio-player__volume-up-icon" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
                        <svg class="audio-player__volume-mute-icon" style="display: none;" fill="currentColor" class="icon volume-mute-icon" viewBox="0 0 24 24">
                            <path d="M7 9v6h4l5 5V4l-5 5H7zm12.5-3.24L17.74 5 15 7.74 12.26 5 11 6.26 13.74 9 11 11.74 12.26 13 15 10.26 17.74 13 19 11.74 16.26 9 19 6.26z"></path>
                        </svg>
                    </div>
                </button>
                <input type="range" class="audio-player__volume-slider" min="0" max="1" step="0.01" value="1">
            </div>

            <div class="audio-player__playback-speed-controls">
                <select class="audio-player__playback-speed-select audio-player__control-select audio-player__fancy-select">
                    <option value="0.5">0.5x</option>
                    <option value="0.75">0.75x</option>
                    <option value="1" selected>1x</option>
                    <option value="1.25">1.25x</option>
                    <option value="1.5">1.5x</option>
                    <option value="2">2x</option>
                </select>
            </div>
        </div>
    </div>
  {% endfor %}
</div>