WIDE · stable
#Card (capa + player lado a lado)
Card (capa + player lado a lado), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div data-music-player="true" data-initial="0" class="sc-music-card">
<div class="sc-music-card-cover">
<img data-music-cover="" src="/assets/slide (1).svg" alt="Capa">
</div>
<div class="sc-music-player sc-music--flat">
<h3 class="sc-music-player-title" data-music-title="">Título</h3>
<p class="sc-music-player-subtitle" data-music-artist="">Artista</p>
<audio></audio>
<div class="sc-music-time">
<span data-music-time="">0:00</span>
<span data-music-duration="">0:00</span>
</div>
<input class="sc-range" type="range" value="0" aria-label="Progresso">
<div class="sc-music-controls">
<button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-music-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
<button class="sc-btn sc-btn-primary sc-btn-icon is-main" type="button" data-music-toggle="" aria-label="Play/Pause"><i class="sc-icon" data-smart-icon="play-circle" data-music-icon=""></i></button>
<button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-music-next="" aria-label="Próxima"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
</div>
</div>
</div>Classes, JavaScript e API
Inicialize musicPlayers após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- musicPlayers
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.