Mini player (barra)

<div data-music-player="true" class="sc-music-mini" data-initial="0">
                <div class="sc-music-mini-cover">
                  <img data-music-cover="" src="/assets/slide (1).svg" alt="Capa">
                </div>
                <div class="sc-music-mini-meta">
                  <p class="sc-music-mini-title" data-music-title="">Título</p>
                  <p class="sc-music-mini-subtitle" data-music-artist="">Artista</p>
                  <input class="sc-range sc-range-sm" type="range" value="0" aria-label="Progresso">
                </div>
                <div class="sc-music-mini-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>
                <audio></audio>
                
              </div>

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

• 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.

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.