audio_player-1.0.x-dev/templates/audio-playlist/skin-one.html.twig
templates/audio-playlist/skin-one.html.twig
{#
/**
* @file
* Theme override for the custom audio player block.
*
* Available variables:
* - audio_files: An array of audio file data (title, artist, src, cover).
* - initial_active_index: The index of the initially active audio track.
*/
#}
<div class="audio-player-container skin-one-playlist {{ palette }}" {% if data_attributes.equalizer %}data-equalizer="{{ data_attributes.equalizer }}" {% endif %}>
<div class="audio-player-top-row">
<div class="audio-player-music-icon">
<svg fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z"/></svg>
</div>
<div class="audio-player-current-track-title">
<span class="audio-player-song-main-title"></span> <span class="audio-player-song-sub-title"></span>
</div>
<div class="audio-player-toggle-player">
<svg class="audio-player-caret-up" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2929 8.79289C11.6834 8.40237 12.3166 8.40237 12.7071 8.79289L17.7071 13.7929C18.0976 14.1834 18.0976 14.8166 17.7071 15.2071C17.3166 15.5976 16.6834 15.5976 16.2929 15.2071L12 10.9142L7.70711 15.2071C7.31658 15.5976 6.68342 15.5976 6.29289 15.2071C5.90237 14.8166 5.90237 14.1834 6.29289 13.7929L11.2929 8.79289Z" fill="currentColor"/>
</svg>
<svg class="audio-player-caret-down" fill="currentColor" style="display: none;" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 8.79289C6.68342 8.40237 7.31658 8.40237 7.70711 8.79289L12 13.0858L16.2929 8.79289C16.6834 8.40237 17.3166 8.40237 17.7071 8.79289C18.0976 9.18342 18.0976 9.81658 17.7071 10.2071L12.7071 15.2071C12.3166 15.5976 11.6834 15.5976 11.2929 15.2071L6.29289 10.2071C5.90237 9.81658 5.90237 9.18342 6.29289 8.79289Z" fill="currentColor"/>
</svg>
</div>
</div>
<div class="audio-player-controls">
<audio class="audio-player-audio-source" src=""></audio>
<div class="audio-player-control-row-1">
<div class="audio-player-main-playback-buttons">
<svg class="audio-player-rewind-btn" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5.8A1.8 1.8 0 0 1 4.8 4h1.4A1.8 1.8 0 0 1 8 5.8v12.4A1.8 1.8 0 0 1 6.2 20H4.8A1.8 1.8 0 0 1 3 18.2V5.8ZM21.462 4.113A1 1 0 0 1 22 5v14a1 1 0 0 1-1.573.82l-10-7a1 1 0 0 1 0-1.64l10-7a1 1 0 0 1 1.035-.067Z" fill="currentColor"/></svg>
<svg class="audio-player-play-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.286 3.407A1.5 1.5 0 0 0 6 4.684v14.632a1.5 1.5 0 0 0 2.286 1.277l11.888-7.316a1.5 1.5 0 0 0 0-2.555L8.286 3.407z" fill="currentColor"/></svg>
<svg class="audio-player-pause-icon" style="display: none;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.163 3.819C5 4.139 5 4.559 5 5.4v13.2c0 .84 0 1.26.163 1.581a1.5 1.5 0 0 0 .656.655c.32.164.74.164 1.581.164h.2c.84 0 1.26 0 1.581-.163a1.5 1.5 0 0 0 .656-.656c.163-.32.163-.74.163-1.581V5.4c0-.84 0-1.26-.163-1.581a1.5 1.5 0 0 0-.656-.656C8.861 3 8.441 3 7.6 3h-.2c-.84 0-1.26 0-1.581.163a1.5 1.5 0 0 0-.656.656zm9 0C14 4.139 14 4.559 14 5.4v13.2c0 .84 0 1.26.164 1.581a1.5 1.5 0 0 0 .655.655c.32.164.74.164 1.581.164h.2c.84 0 1.26 0 1.581-.163a1.5 1.5 0 0 0 .655-.656c.164-.32.164-.74.164-1.581V5.4c0-.84 0-1.26-.163-1.581a1.5 1.5 0 0 0-.656-.656C17.861 3 17.441 3 16.6 3h-.2c-.84 0-1.26 0-1.581.163a1.5 1.5 0 0 0-.655.656z" fill="currentColor"/></svg>
<svg class="audio-player-forward-btn" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.538 4.113a1 1 0 0 1 1.035.068l10 7a1 1 0 0 1 0 1.638l-10 7A1 1 0 0 1 2 19V5a1 1 0 0 1 .538-.887ZM16 5.8A1.8 1.8 0 0 1 17.8 4h1.4A1.8 1.8 0 0 1 21 5.8v12.4a1.8 1.8 0 0 1-1.8 1.8h-1.4a1.8 1.8 0 0 1-1.8-1.8V5.8Z" fill="currentColor"/></svg>
</div>
<div class="audio-player-progress-and-time">
<div class="audio-player-progress-bar-container">
<div class="audio-player-buffer-bar"></div>
<div class="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-duration">0:00</span>
</div>
</div>
</div>
<div class="audio-player-control-row-2">
<div class="audio-player-volume-controls">
<div class="audio-player-volume-icon-wrapper">
<svg class="audio-player-volume-up-icon" fill="currentColor" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 48.1605 48.9342 C 48.8765 49.4181 49.8252 49.2245 50.3865 48.4309 C 53.9286 43.3593 56.0000 36.8360 56.0000 29.9255 C 56.0000 23.0151 53.9096 16.4724 50.3865 11.4008 C 49.8252 10.6072 48.8765 10.4136 48.1605 10.9169 C 47.4248 11.4202 47.3086 12.3880 47.8700 13.2010 C 50.9863 17.7887 52.9221 23.6732 52.9221 29.9255 C 52.9221 36.1779 51.0446 42.1398 47.8700 46.6500 C 47.3086 47.4437 47.4248 48.4115 48.1605 48.9342 Z M 21.6412 47.5985 C 22.9575 47.5985 23.9060 46.6307 23.9060 45.3338 L 23.9060 14.4592 C 23.9060 13.1623 22.9575 12.0783 21.6025 12.0783 C 20.6540 12.0783 20.0152 12.5042 18.9893 13.4720 L 10.4528 21.5439 C 10.3173 21.6601 10.1431 21.7181 9.9495 21.7181 L 4.2005 21.7181 C 1.4711 21.7181 0 23.2086 0 26.1122 L 0 33.6227 C 0 36.5263 1.4711 38.0168 4.2005 38.0168 L 9.9495 38.0168 C 10.1431 38.0168 10.3173 38.0748 10.4528 38.1910 L 18.9893 46.3403 C 19.9184 47.2114 20.6927 47.5985 21.6412 47.5985 Z M 40.3595 43.6497 C 41.1143 44.1530 42.0436 43.9594 42.5855 43.1851 C 45.1405 39.6234 46.6117 34.8809 46.6117 29.9255 C 46.6117 24.9508 45.1599 20.2083 42.5855 16.6466 C 42.0242 15.8917 41.1143 15.6981 40.3595 16.2014 C 39.6238 16.7047 39.5076 17.6532 40.0884 18.4855 C 42.1982 21.5826 43.4953 25.6476 43.4953 29.9255 C 43.4953 34.2034 42.2370 38.3072 40.0690 41.3656 C 39.5270 42.1979 39.6238 43.1464 40.3595 43.6497 Z M 32.6360 38.4233 C 33.2941 38.8878 34.2426 38.7330 34.8039 37.9781 C 36.3139 35.9456 37.2238 32.9646 37.2238 29.9255 C 37.2238 26.8865 36.2945 23.9249 34.8039 21.8536 C 34.2426 21.0987 33.3135 20.9439 32.6360 21.4084 C 31.7843 21.9698 31.6875 22.9570 32.3069 23.8087 C 33.4296 25.3185 34.1071 27.6221 34.1071 29.9255 C 34.1071 32.2290 33.3909 34.5325 32.2876 36.0617 C 31.7068 36.8941 31.8037 37.8426 32.6360 38.4233 Z"/></svg>
<svg class="audio-player-volume-mute-icon" style="display: none;" fill="currentColor" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 39.1796 33.4024 L 39.1796 8.2070 C 39.1796 6.6367 38.0312 5.3242 36.3906 5.3242 C 35.2421 5.3242 34.4687 5.8398 33.2265 7.0117 L 23.6171 16.1055 C 23.4765 16.2461 23.3359 16.3398 23.1718 16.3867 L 22.2343 16.4570 Z M 46.7733 49.9727 C 47.4999 50.6758 48.6484 50.6758 49.3280 49.9727 C 50.0312 49.2461 50.0548 48.1211 49.3280 47.4180 L 9.2030 7.2929 C 8.4999 6.5898 7.3280 6.5898 6.6249 7.2929 C 5.9452 7.9727 5.9452 9.1680 6.6249 9.8476 Z M 36.4374 48.3320 C 37.8202 48.3320 38.7812 47.5117 39.0859 46.1289 L 11.4062 18.4961 C 10.6562 19.3867 10.2343 20.6758 10.2343 22.3164 L 10.2343 31.4102 C 10.2343 34.9258 12.0155 36.7305 15.3202 36.7305 L 22.2812 36.7305 C 22.5155 36.7305 22.7265 36.8008 22.8671 36.9414 L 33.2265 46.8086 C 34.3515 47.8633 35.2890 48.3320 36.4374 48.3320 Z"/></svg>
</div>
<div class="audio-player-volume-slider-container">
<div class="audio-player-custom-volume-slider">
<div class="audio-player-custom-volume-slider-fill"></div>
</div>
</div>
</div>
<div class="audio-player-mode-buttons">
<svg class="audio-player-autoplay-btn" fill="currentColor" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 23.7109 37.0469 C 22.6327 37.7031 21.4140 37.1875 21.4140 36.0625 L 21.4140 19.9375 C 21.4140 18.8594 22.7030 18.3906 23.7109 18.9766 L 36.8827 26.7812 C 37.8436 27.3437 37.8671 28.6797 36.8827 29.2656 Z"/></svg>
<svg class="audio-player-random-btn" fill="currentColor" width="800px" height="800px" viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M 5.459789,4.64957 Q 5.058009,5.26564 4.542379,6.4777 4.395059,6.17636 4.294609,5.9922 4.194169,5.80805 4.023409,5.56698 3.852649,5.32591 3.681889,5.18863 3.511129,5.05136 3.260009,4.95426 3.008899,4.85716 2.714259,4.85716 H 1.214255 q -0.09375,0 -0.154018,-0.0603 Q 0.999969,4.73666 0.999969,4.64287 V 3.35716 q 0,-0.0937 0.06027,-0.15402 0.06027,-0.0603 0.154018,-0.0603 h 1.500004 q 1.6741,0 2.74553,1.5067 z m 7.54018,5.35045 q 0,0.0937 -0.0603,0.15402 l -2.14285,2.14285 q -0.0603,0.0603 -0.15402,0.0603 -0.0871,0 -0.15067,-0.0636 -0.0636,-0.0636 -0.0636,-0.15067 v -1.28571 q -0.21428,0 -0.5692,0.003 -0.35491,0.003 -0.54241,0.007 -0.1875,0.003 -0.48884,-0.007 -0.30133,-0.0101 -0.47544,-0.0335 -0.17411,-0.0234 -0.42857,-0.0703 -0.25447,-0.0469 -0.42188,-0.12388 -0.16741,-0.077 -0.38839,-0.19085 -0.22098,-0.11384 -0.39509,-0.26786 -0.17411,-0.15401 -0.3683,-0.35825 -0.1942,-0.20425 -0.375,-0.46541 0.39509,-0.62276 0.91071,-1.82812 0.14732,0.30134 0.24777,0.48549 0.10044,0.18415 0.2712,0.42522 0.17076,0.24107 0.34152,0.37835 0.17076,0.13728 0.42188,0.23438 0.25111,0.0971 0.54576,0.0971 h 1.71428 V 7.85687 q 0,-0.0937 0.0603,-0.15402 0.0603,-0.0603 0.15402,-0.0603 0.0803,0 0.16071,0.067 l 2.13616,2.13616 q 0.0603,0.0603 0.0603,0.15402 z m 0,-6 q 0,0.0937 -0.0603,0.15401 l -2.14285,2.14286 q -0.0603,0.0603 -0.15402,0.0603 -0.0871,0 -0.15067,-0.0636 -0.0636,-0.0636 -0.0636,-0.15067 V 4.85721 h -1.71428 q -0.32143,0 -0.58259,0.10045 -0.26116,0.10044 -0.46206,0.30134 -0.20089,0.20089 -0.34152,0.41183 -0.14062,0.21093 -0.30133,0.51897 -0.21429,0.41518 -0.52233,1.14509 -0.19419,0.44196 -0.33147,0.7433 -0.13728,0.30134 -0.36161,0.70313 -0.22433,0.40179 -0.42857,0.66964 -0.20424,0.26786 -0.49553,0.5558 -0.2913,0.28795 -0.60268,0.45871 -0.31139,0.17076 -0.71317,0.28125 -0.40179,0.11049 -0.85714,0.11049 H 1.214245 q -0.09375,0 -0.154018,-0.0603 -0.060258,-0.0603 -0.060258,-0.15404 V 9.35716 q 0,-0.0937 0.06027,-0.15402 0.06027,-0.0603 0.154018,-0.0603 h 1.500004 q 0.32142,0 0.58258,-0.10044 0.26117,-0.10045 0.46206,-0.30134 0.20089,-0.20089 0.34152,-0.41183 0.14062,-0.21094 0.30134,-0.51898 0.21428,-0.41517 0.52232,-1.14508 0.19419,-0.44197 0.33147,-0.74331 0.13728,-0.30134 0.36161,-0.70312 0.22433,-0.40179 0.42857,-0.66965 0.20424,-0.26785 0.49553,-0.5558 0.2913,-0.28795 0.60268,-0.45871 0.31139,-0.17076 0.71317,-0.28124 0.40179,-0.1105 0.85715,-0.1105 h 1.71428 V 1.85713 q 0,-0.0937 0.0603,-0.15402 0.0603,-0.0603 0.15402,-0.0603 0.0803,0 0.16071,0.067 l 2.13616,2.13616 q 0.0603,0.0603 0.0603,0.15402 z"/></svg>
</div>
</div>
</div>
<canvas class="audio-player-equalizer-canvas"></canvas>
{% set playlist = [] %}
{% for index, audio in audios %}
{% set playlist = playlist|merge([{
mainTitle: audio.audio_title,
subTitle: audio.audio_subtitle,
src: audio.original_url
}]) %}
{% endfor %}
<div class="audio-player-playlist">
<h3>{{ ('Playlist')|t }}</h3>
<div class="audio-player-playlist-content">
<ul class="audio-player-playlist-ul" data-playlist="{{ playlist|json_encode }}">
{% for song in playlist %}
<li data-index="{{ loop.index0 }}" data-src="{{ song.src }}">
<svg class="audio-player-playlist-item-icon" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z"/>
</svg>
<span class="audio-player-title-info">{{ song.mainTitle }} {{ song.subTitle }}</span>
<span>0:00</span> <!-- You can leave this as is and handle time dynamically via JS -->
</li>
{% endfor %}
</ul>
</div>
</div>
</div>