Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogomedia · stable

Music player

Players compactos, playlists e composições de mídia com controles reais. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Music player quando a interface precisar de players compactos, playlists e composições de mídia com controles reais.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
WIDE · stable

Coverflow premium (card)

Coverflow premium (card), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-music-shell">
                <div class="sc-card sc-card-outline">
                  <div data-music-player="true" data-initial="3">
                    <div class="sc-coverflow">
                      <div class="sc-coverflow-track" aria-label="Covers (coverflow)" tabindex="0">
                        <div class="sc-coverflow-slide">
                          <img src="/assets/slide (1).svg" alt="Capa 1">
                          <div class="sc-coverflow-overlay">
                            <a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube">
                              <i class="sc-icon" data-smart-icon="youtube"></i>
                            </a>
                          </div>
                        </div>
                        <div class="sc-coverflow-slide"><img src="/assets/slide (2).svg" alt="Capa 2"><div class="sc-coverflow-overlay"><a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a></div></div>
                        <div class="sc-coverflow-slide"><img src="/assets/slide (3).svg" alt="Capa 3"><div class="sc-coverflow-overlay"><a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a></div></div>
                        <div class="sc-coverflow-slide"><img src="/assets/slide (4).svg" alt="Capa 4"><div class="sc-coverflow-overlay"><a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a></div></div>
                        <div class="sc-coverflow-slide"><img src="/assets/slide (5).svg" alt="Capa 5"><div class="sc-coverflow-overlay"><a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a></div></div>
                        <div class="sc-coverflow-slide"><img src="/assets/slide (6).svg" alt="Capa 6"><div class="sc-coverflow-overlay"><a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a></div></div>
                        <div class="sc-coverflow-slide"><img src="/assets/slide (7).svg" alt="Capa 7"><div class="sc-coverflow-overlay"><a class="sc-coverflow-link" data-music-youtube="" href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Abrir no YouTube"><i class="sc-icon" data-smart-icon="youtube"></i></a></div></div>
                      </div>
                    </div>

                    <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>
                </div>
              </div>
Classes, JavaScript e API
sc-music-shellsc-cardsc-card-outlinesc-coverflowsc-coverflow-tracksc-coverflow-slidesc-coverflow-overlaysc-coverflow-linksc-iconsc-music-playersc-music--tightsc-music-player-titlesc-music-player-subtitlesc-music-timesc-rangesc-music-controlssc-btnsc-btn-glasssc-btn-iconsc-btn-primary

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.

WIDE · stable

Mini player (barra)

Mini player (barra), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<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>
Classes, JavaScript e API
sc-music-minisc-music-mini-coversc-music-mini-metasc-music-mini-titlesc-music-mini-subtitlesc-rangesc-range-smsc-music-mini-controlssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

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.

WIDE · stable

Player + playlist clicável

Player + playlist clicável, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-music-shell">
                <div data-music-player="true" data-initial="1" class="sc-music-player">
                  <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>
Classes, JavaScript e API
sc-music-shellsc-music-playersc-music-player-titlesc-music-player-subtitlesc-music-timesc-rangesc-music-controlssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primarysc-music-listsc-music-tracksc-music-track-titlesc-music-track-subtitle

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.

WIDE · stable

Neon / glass (tema-driven)

Neon / glass (tema-driven), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card sc-card-outline sc-fx-conic">
                <div data-music-player="true" data-initial="2" class="sc-music-shell">
                  <div class="sc-music-player sc-music--neon">
                    <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>
              </div>
Classes, JavaScript e API
sc-cardsc-card-outlinesc-fx-conicsc-music-shellsc-music-playersc-music--neonsc-music-player-titlesc-music-player-subtitlesc-music-timesc-rangesc-music-controlssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

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.

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.

#
Link direto →
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
sc-music-cardsc-music-card-coversc-music-playersc-music--flatsc-music-player-titlesc-music-player-subtitlesc-music-timesc-rangesc-music-controlssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primary

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.

WIDE · stable

Playlist (somente lista, sem capa)

Playlist (somente lista, sem capa), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<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>
Classes, JavaScript e API
sc-music-shellsc-music-playersc-music--tightsc-music-player-titlesc-music-player-subtitlesc-music-timesc-rangesc-music-controlssc-btnsc-btn-glasssc-btn-iconsc-iconsc-btn-primarysc-music-listsc-music-tracksc-music-track-titlesc-music-track-subtitle

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.

Componentes relacionados

Carousel →Galerias →Photo rail →