Есть вот такой код:
<button class="audio-player" type="button">
<svg class="audio-player__icon" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.625 18.75H1.875V41.25H5.625V18.75Z" fill="white"/>
<path d="M47.8125 18.75H44.0625V41.25H47.8125V18.75Z" fill="white"/>
<path d="M15.9375 10.3125H12.1875V48.75H15.9375V10.3125Z" fill="white"/>
<path d="M37.5 11.25H33.75V48.75H37.5V11.25Z" fill="white"/>
<path d="M58.125 11.25H54.375V48.75H58.125V11.25Z" fill="white"/>
<path d="M26.25 1.875H22.5V58.125H26.25V1.875Z" fill="white"/>
</svg>
<span class="audio-player__text">On</span>
</button>
Суть такая, что по нажатию на кнопку audio-player
, должен меняться текст on/off
, а также должен прыгать при воспроизведении audio хотя бы просто хаотично анализатор спектра (т.е. svg линии - audio-player__icon
).