Playlist (somente lista, sem capa)

<div data-music-player="true" data-initial="0" class="sc-music-shell">
                <div class="sc-music-player sc-music--tight">
                  <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 class="sc-music-list" aria-label="Playlist">
                  <div class="sc-music-track" role="button" tabindex="0" data-music-pick="0">
                    <i class="sc-icon" data-smart-icon="play-circle"></i>
                    <div>
                      <div class="sc-music-track-title">Symphony</div>
                      <div class="sc-music-track-subtitle">Clean Bandit ft. Zara Larsson</div>
                    </div>
                    <i class="sc-icon" data-smart-icon="chevrons-right"></i>
                  </div>
                  <div class="sc-music-track" role="button" tabindex="0" data-music-pick="1">
                    <i class="sc-icon" data-smart-icon="play-circle"></i>
                    <div>
                      <div class="sc-music-track-title">Pawn It All</div>
                      <div class="sc-music-track-subtitle">Alicia Keys</div>
                    </div>
                    <i class="sc-icon" data-smart-icon="chevrons-right"></i>
                  </div>
                  <div class="sc-music-track" role="button" tabindex="0" data-music-pick="2">
                    <i class="sc-icon" data-smart-icon="play-circle"></i>
                    <div>
                      <div class="sc-music-track-title">Instant Crush</div>
                      <div class="sc-music-track-subtitle">Daft Punk ft. Julian Casablancas</div>
                    </div>
                    <i class="sc-icon" data-smart-icon="chevrons-right"></i>
                  </div>
                </div>
              </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.