Shopify Music Player Section

Seção do reprodutor de música do Shopify

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: compatível com a maioria dos temas do Shopify, do Debut ao Dawn 2.0

Na era digital, criar uma experiência de compra online envolvente é crucial para o sucesso. A seção Shopify Music Player oferece exatamente isso – uma maneira única de cativar seus clientes através da música. Nesta postagem, exploraremos como esse recurso pode transformar sua loja Shopify em um destino de compras envolvente e memorável.

Por que a música é importante no comércio eletrônico:

  • Conexão Emocional : A música tem o poder de evocar emoções, tornando sua loja memorável.
  • Identidade da marca : playlists personalizadas podem reforçar a imagem e os valores da sua marca.
  • Maior envolvimento : a música de fundo pode incentivar os clientes a passar mais tempo navegando.

Apresentando a seção Shopify Music Player: Este recurso inovador permite integrar música perfeitamente à sua loja Shopify. É mais do que apenas um jogador; é uma ferramenta para elevar sua marca e interagir com seus clientes em um nível totalmente novo.

Benefícios para sua loja:

  • Experiência de compra única : Destaque-se dos concorrentes oferecendo uma experiência de navegação rica em sentidos.
  • Maior envolvimento do cliente : a música pode manter os clientes em seu site por mais tempo, aumentando a probabilidade de compras.
  • Apresentação de produtos : Ideal para lojas que vendem música ou produtos relacionados à música.

Características principais:

  • Fácil instalação : adicione-o à sua loja com apenas alguns cliques.
  • Listas de reprodução personalizadas : carregue sua música ou crie links para fontes externas.
  • Totalmente personalizável : ajuste as configurações de acordo com o estilo e o clima da sua loja.
  • Design responsivo : funciona perfeitamente em todos os dispositivos.

O que você está comprando:

  • Adicione a seção do reprodutor de música ao seu Shopify
  • Adicione controles ao reprodutor de música
  • Carregue qualquer música

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Para iniciar:

1. Vá para Admin store > Loja online > Temas > Ações > Editar código.

2. Na pasta da seção, crie um novo arquivo de seção, nomeie-o como “shopify-music-player” e cole o código abaixo.

{% assign autoplayAudio = section.settings.autoplay_audio %}
{% if autoplayAudio == true %}
<div class="autoplayPermission">
<span class="closeAudio">X</span>
<span style="text-align: center;">O site contém áudio</span>
<button onclick="init()"> Permitir reprodução automática</button>
</div>
{% endif %}
<div class="audioContainer {{section.settings.audio_position }} ">
<div class="audioWrapper">
<div class="audioBox">
<div class="audioList">
{% for block in section.blocks %}
{% assign totalAudio = forloop.length %}
{% assign audio_file = block.settings.audio_file %}
<div class="audioTrack" data-track= " {{forloop.index0}} " onclick="playTrack(this.dataset.track)">
<div class="musicWrapper">
{% if block.settings.image != blank %}
<div class="imageWrapper">
<img src=" {{block.settings.image | img_url: 'small' }} " alt=" {{block.settings.image | img_url: 'small' }} ">
</div>
{% endif %}
<div class="musicInfo" >
<p style="margem: 0; alinhamento de texto: centro">
{% assign audio = audio_file | split: "/" | slice: -1 %}
{{ audio | split: "." | slice: 0 | replace: "[" , "" | replace: "]" , "" | replace: "\" , "" | replace: '"' , "" | replace: "-" , " " | upcase }}
</p>
{% if block.settings.audio_artist != blank %} <span style="font-size: 13px"> {{block.settings.audio_artist}} </span> {% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="activeContainer">
{% for block in section.blocks %}
{% assign audio_file = block.settings.audio_file %}
<div class="audioActive" data-active= " {{forloop.index0}} ">
<audio class="audio" permitir="autoplay" {{ block.shopify_attributes }}
dados-áudio= " {{audio_file}} "
data-audio-index = " {{forloop.index0}} ">
<source src=" {{block.settings.audio_file}} " type="audio/mp3">
Seu navegador não é compatível com a reprodução do áudio!
</audio>
<div class="musicWrapper">
{% if block.settings.image != blank %}
<div class="imageWrapper">
<img src=" {{block.settings.image | img_url: 'small' }} " alt=" {{block.settings.image | img_url: 'small' }} ">
</div>
{% endif %}
<div class="musicInfo" >
<p style="margem: 0; alinhamento de texto: centro">
{% assign audio = audio_file | split: "/" | slice: -1 %}
{{ audio | split: "." | slice: 0 | replace: "[" , "" | replace: "]" , "" | replace: "\" , "" | replace: '"' , "" | replace: "-" , " " | upcase }}
</p>
<div class="musicDurWrap">
<input type="range" class="musicDur inputRange" min="0" value="0" data-duration=" {{forloop.index0}} ">
<div style="display: flex;"> <span class="currentTime"></span>&nbsp/&nbsp<span class="audioDuration"></span></div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="audioController">
<div class="controle prevCtrl">
<svg viewBox="0 0 50 50">
<caminho d="M21.91,18.49L4.08,1.56C3.16,0.69,1.67,1.35,1.67,2.62L1.5,47.37c0,1.28,1.49,1.95,2.41,1.08l17.84-16.83" />
<caminho d="M21.74,31,85l-0,06,15,12c0,1,28,1,49,1,95,2,41,1,08l23,72-22,37c0,61-0,58,0,61-1,57,0-2,15L24,26,1,16
c-0,92-0,87-2,41-0,21-2,41,1,07l-0,06,15,87"/>
</svg>
</div>
<div class="pausePlay" id="pausePlay">
<div class="controle de reprodução">
<svg viewBox="0 0 50 50">
<caminho d="M8.59,2.93v44.14c0,1.34,1.04,2.22,1.93,1.61l32.23-22.07c0.97-0.67,0.97-2.56,0-3.22L10.52,1.32
C9.63,0,71,8,59,1,59,8,59,2,93z"/>
</svg>
</div>
<div class="pause control" style="display: none">
<svg viewBox="0 0 50 50" style="largura do traço: 6">
<polyline points="0,0 0,0 0,0 "/>
<caminho d="M12.52,5.24L12.1,44.59c-0.02,1.5,1.15,2.72,2.6,2.72h0.04c1.47,0,2.67-1.23,2.67-2.75V5.11
c0-1,34-1,05-2,42-2,34-2,42h-0,05C13,64,2,69,12,53,3,83,12,52,5,24z"/>
<caminho d="M32.46,5,24l-0,42,39,35c-0,02,1,5,1,15,2,72,2,6,2,72h0,04c1,47,0,2,67-1,23,2,67-2,75V5.11
c0-1,34-1,05-2,42-2,34-2,42h-0,05C33,59,2,69,32,48,3,83,32,46,5,24z"/>
</svg>
</div>
</div>
<div class="controle nextCtrl">
<svg viewBox="0 0 50 50">
<caminho d="M21.91,18.49L4.08,1.56C3.16,0.69,1.67,1.35,1.67,2.62L1.5,47.37c0,1.28,1.49,1.95,2.41,1.08l17.84-16.83" />
<caminho d="M21.74,31,85l-0,06,15,12c0,1,28,1,49,1,95,2,41,1,08l23,72-22,37c0,61-0,58,0,61-1,57,0-2,15L24,26,1,16
c-0,92-0,87-2,41-0,21-2,41,1,07l-0,06,15,87"/>
</svg>
</div>
<div class="shuffleAudio">
<svg viewBox="0 0 50 50">
<caminho estilo = "largura do traço: 10" d = "M1.76,8.95c2.37,0.04,4.11,0.07,4.75,0.28c8.03,2.63,19.21,25.25,28.76,30.16c1.55,0.8 ,5,89,0,36,5,89,0,36"/>
<caminho estilo="largura do traço:10" d="M41.41,9.39c0,0-3.84-0.37-5.21,0.29c-2.05,0.98-8.51,9.52-9.68,10.48"/>
<estilo de caminho = "largura do traço: 10" d = "M1.76,40.52c2.13-0.03,3.69-0.06,4.26-0.24c3.54-1.09,10.11-8.49,11.58-9.68"/>
<polygon style = "largura do traço: 6" pontos = "41,16,36,94 41,16,42,8 44,65,39,76"/>
<polygon style = "largura do traço: 6" pontos = "41,16,6,36 41,16,12,22 44,65,9,18"/>
</svg>
</div>
<div class="volumeWrap">
<div class="rangeWrap">
<input type="range" class="volRange inputRange" min="0" max="100" value="50">
</div>
<div class="volumeBox">
<div class="volume">
<svg class="vol" viewBox="0 0 50 50">
<pontos do polígono = "0,52,15,3 0,52,34,96 7,68,35,21 20,57,48,63 20,57,24,94 20,57,1,26 7,59,15,27 "/>
<path style = "preenchimento: nenhum; largura do traço: 6" d = "M25.43,3.63C36.8,3.19,46.35,12.94,46.46,24.8c0.11,12.04-9.53,22.08-21.08,21.6" />
<caminho d="M29.08,34.96c4.2-0.83,7.01-5.92,6.5-10.91c-0.44-4.25-3.22-7.76-6.75-8.22
C28.91,22.21,28.99,28.59,29.08,34.96z"/> M0,12,0,19"/> M0,12,0,19"/>
</svg>

</div>
<div class="silenciado">
<svg class="mute" viewBox="0 0 50 50">
<pontos do polígono = "0,52,15,3 0,52,34,96 7,68,35,21 20,57,48,63 20,57,24,94 20,57,1,26 7,59,15,27 "/>
<path style = "preenchimento: nenhum; largura do traço: 6" d = "M25.43,3.63C36.8,3.19,46.35,12.94,46.46,24.8c0.11,12.04-9.53,22.08-21.08,21.6" />
<caminho d="M29.08,34.96c4.2-0.83,7.01-5.92,6.5-10.91c-0.44-4.25-3.22-7.76-6.75-8.22
C28.91,22.21,28.99,28.59,29.08,34.96z"/>
<line style="largura do traço: 6" x1="2,64" y1="2,64" x2="47,32" y2="47,32"/>
</svg>
</div>
</div>
</div>
<div class="noteMenu">
<svg class="noteIcon" viewBox="0 0 53 53">
<pontos de polilinha = "-0,68,-1,79 -0,68,-1,79 -0,68,-1,79 "/>
<caminho d="M27.62,36.1l0.06-33.67c0-0.75-0.6-1.36-1.35-1.37l-0.17,0c-1.1-0.02-2.0.58-2.01,1.33L23.8,30.87"/ >
<caminho d = "M23,8,30,87c-2,98-1,68-7,12-1,74-11,72-0,02c-0,03,0,01-0,06,0,02-0,09,0,04c-5,79,3,07-8,38,9,83-6,74,13,74
c2.11,5.03,10.66,5.72,16.18,2.63c3.92-2.19,6.42-6.48,6.19-11.87"/>
<caminho d="M26.99,4.74"/>
<caminho d="M25.46,0.66c3.99-0.32,7.29,2.42,8.38,5.81c0.75,1.79,1,3.8,2.12,4.98c1.58,0.93,3.52,1.03,5.28,0.4
c1,86-0,7,3,58-2,21,4,8-4,02l0,35,0,16c-1,14,3,3-4,01,6,57-7,79,7,09c-2,13,0,33-4,63,0,05-6,26-1,42
c-1,45-1,2-2,58-3,09-3,61-4,33c-0,72-0,81-1,39-1,52-1,79-1,01c-0,07,0,08-0,2,0,16-0,39,0,27L25,46,0,66L25,46,0,66z "/>
<caminho d="M25.87,0.97c0.83,1.15,1.45,2.33,1.82,3.64c-0.18,1.59-0.56,2.67-0.39,4.23C27.3,8.84,25.87,0.97,25.87,0.97L25 0,87,0,97z"/>
</svg>
</div>
</div>
</div>
</div>
<roteiro>
const áudios = document.querySelectorAll('.audio');
const trackContainer = document.querySelectorAll('.audioTrack');
const activeAudios= document.querySelectorAll('.audioActive');
const ativo = document.querySelector('.activeAudio')
const audioList = document.querySelector('.audioList');
const audioBox = document.querySelector('.audioBox');
const activeContainer = document.querySelector('.activeContainer');
permissão const = document.querySelector('.autoplayPermission');
const closeAudio = document.querySelector('.closeAudio');
const anterior = document.querySelector('.prevCtrl');
const próximo = document.querySelector('.nextCtrl');
const pausePlayCtrl = document.querySelector('#pausePlay');
const pauseCtrl = document.querySelector('.pause');
const playCtrl = document.querySelector('.play');
const shuffleCtrl = document.querySelector('.shuffleAudio');
const volumeBox = document.querySelector('.volumeBox');
const volume = document.querySelector('.volume');
const silenciado = document.querySelector('.mutado');
const noteMenu = document.querySelector('.noteMenu');
const volRange = document.querySelector('.volRange');
deixe brincar;
deixe audioPointer;
deixe abrir = verdadeiro;
deixe volumeValor;
deixe stillScroll = true;
deixe auto = {{autoplayAudio}} ;

prev.addEventListener("clique", playPrev);
next.addEventListener("clique", playNext);
shuffleCtrl.addEventListener("clique", shuffleAudio);
pausePlayCtrl.addEventListener("clique", pausePlay);
volumeBox.addEventListener("clique", mudo);
volRange.addEventListener("clique", volumeUpdate);

noteMenu.addEventListener("clique", audioOpen);
função audioOpen() {
if (aberto == verdadeiro) {
audioBox.style.display = "grade";
aberto = falso;
}outro {
audioBox.style.display = "nenhum";
aberto = verdadeiro;
}
}

if( {{autoplayAudio}} ) {
closeAudio.addEventListener("clique", closeDiv);
}

if(sessionStorage.getItem('Áudio') == nulo){
audioPointer = 1;
sessionStorage.setItem('Áudio', audioPointer)
} outro {
audioPointer = sessionStorage.getItem('Áudio');
}
if(sessionStorage.getItem('Allowauto') == null){
sessionStorage.setItem('Allowauto', true);
jogando = falso;
autoplaySet(falso);
}

if(sessionStorage.getItem('Allowauto') == 'true') {
janela.onscroll = função (e){
if(stillScroll) {
if (sessionStorage.getItem('Áudio') != null) {
audioPointer = sessionStorage.getItem('Áudio')}

autoplaySet(falso);
jogando = falso;
atual(audioPointer);
}
}
}

função closeDiv() {
sessionStorage.setItem('atual', verdadeiro);
permissão.style.display = 'nenhum';
}

if(sessionStorage.getItem('atual')) {
permissão.style.display = 'nenhum';
}

função inicialização() {
permissão.style.display = 'nenhum';
sessionStorage.setItem('Allowauto', true);
sessionStorage.setItem('atual', verdadeiro);
janela.onscroll = função (e){
if(stillScroll) {
if (sessionStorage.getItem('Áudio') != null) {
audioPointer = sessionStorage.getItem('Áudio')}

autoplaySet(falso);
jogando = falso;
atual(audioPointer);
}
}
}

função playNext() {
if (audioPointer <audios.length - 1) {
audioPointer++;
} outro {
audioPointer = 0;
}
áudios.forEach(função(áudio) {
áudio.pausa();
áudio.tempoatual = 0;
});
jogando = falso;
atual(audioPointer);
}

function playAnterior() {
if (audioPointer == 0) {
audioPointer = áudios.length - 1;
} outro {
ponteiro de áudio--
}
áudios.forEach(função(áudio) {
áudio.pausa();
áudio.tempoatual = 0;
});
jogando = falso;
atual(audioPointer);
}

função playTrack(faixa) {
áudios.forEach(função(áudio) {
áudio.pausa();
áudio.tempoatual = 0;
});
audioPointer = faixa;
jogando = falso;
atual(audioPointer);
}

função shuffleÁudio() {
deixe randomIndex;
áudios.forEach(function() {
const totalAudio = audios.length;
randomIndex = Math.floor(Math.random() * (totalAudio));
audioPointer = randomIndex;
})

áudios.forEach(função(áudio) {
áudio.pausa();
áudio.tempoatual = 0;
});
jogando = falso;
atual(audioPointer);
}

função atual() {
if( {{autoplayAudio}} ) {
sessionStorage.setItem('atual', verdadeiro);
permissão.style.display = 'nenhum';
}
function deleteSession() {
const currentIndex = 'Áudio';
Object.keys(sessãoStorage)
.filter( (chave)=> key.match(currentIndex) )
.forEach(função(chave) {
sessionStorage.removeItem(chave)
});
}
sessionStorage.setItem('Áudio', audioPointer);

const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);
audioIndex.currentTime = sessionStorage.getItem(`playing[${audioPointer}]`);
audioPointer = sessionStorage.getItem('Áudio');
pausePlay(audioPointer);
playMusic(áudioPointer);
stillScroll = falso;
}


function playMúsica() {
const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);
const activeAudio = document.querySelector(`[data-active="${audioPointer}"]`);
const trackAudio = document.querySelector(`[data-track="${audioPointer}"]`);
const musicDuration = document.querySelector(`[data-duration="${audioPointer}"]`);

jogando = verdadeiro;

activeAudios.forEach(função(ativo) {
ativo.classList.remove('ativo');
});
activeAudio.classList.add('ativo');

trackContainer.forEach(função(faixa) {
track.classList.remove('ocultar');
});
trackAudio.classList.add('ocultar');

const playPromise = audioIndex.play();
if (playPromise! == indefinido) {
playPromise.then(_ => {})
.catch(erro => {});
}

audioIndex.ontimeupdate = function() {
musicDuration.value = audioIndex.currentTime;
musicDuration.max = audioIndex.duration;
const currentMin = Math.floor(musicDuration.value/60);
const currentSec = musicDuration.value% 60;
const durMin = Math.floor(musicDuration.max / 60 );
const durSec = Math.floor(musicDuration.max/10);

document.querySelector('.active').querySelector('.currentTime').innerText = `${currentMin}:${currentSec.toString().padStart(2, '0')}`;
document.querySelector('.active').querySelector('.audioDuration').innerText = `${durMin}:${durSec}`;

function deleteSession() {
const currentAudio = 'reproduzindo';
Object.keys(sessãoStorage)
.filter( (chave)=> key.match(áudio atual) )
.forEach(função(chave) {
sessionStorage.removeItem(chave)
});
}
deleteSession();
sessionStorage.setItem(`playing[${audioPointer}]`, audioIndex.currentTime);
}

audioIndex.addEventListener('finalizado', (evento) => {
jogarPróximo();
});

musicDuration.addEventListener('input', function() {
audioIndex.currentTime = musicDuration.value;
}, falso);
}

function pausePlay() {
const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);

se(jogando) {
audioIndex.pause();
jogando = falso;
playCtrl.style.display = 'flex';
pauseCtrl.style.display = 'nenhum';
userScrolled = falso;
noteMenu.classList.remove('reproduzindo');
} outro {
autoplaySet(verdadeiro);
jogando = verdadeiro;
atual(audioPointer);
pauseCtrl.style.display = 'flex';
playCtrl.style.display = 'nenhum';
noteMenu.classList.add('reproduzindo');

}
if(sessionStorage.getItem('Allowauto') == 'true') {
autoplaySet(falso);
}outro{
autoplaySet(verdadeiro);
}
}

função autoplaySet(autoAllow) {
function deleteSession() {
const currentIndex = 'AllowAuto';
Object.keys(sessãoStorage)
.filter( (chave)=> key.match(currentIndex) )
.forEach(função(chave) {
sessionStorage.removeItem(chave)
});
}
deleteSession();
sessionStorage.setItem('Allowauto', autoAllow);
}

função atualização de volume() {
const volValue = volRange.valor;
volumeValor = volValor/100;
volume.classList.remove('silenciado');
volumeDados(volumeValor);
silenciado.style.display = 'nenhum';
volume.style.display ='flex';
}

função mudo() {
if (valorValor! = 0) {
silenciado.style.display = 'flex';
volume.style.display ='nenhum';
volumeValor = 0;
volumeDados(volumeValor);
} outro {
atualização de volume();
}
}

function volumeDados() {
const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);
audioIndex.volume = volumeValor;
}

</script>
<estilo>
entrada, área de texto {
preenchimento: 0;
}
.autoplayPermission {
posição: fixa;
superior: 115px;
direita: 16px;
largura: 220px;
exibição: flexível;
plano de fundo: {{section.settings.track_bg}} ;
direção flexível: coluna;
alinhar itens: centro;
preenchimento: 5px;
sombra da caixa: 0px 0px 10px;
índice z: 2;
}

.closeAudio {
margem esquerda: 90%;
largura: 24px;
altura: 24px;
exibição: flexível;
justificar-conteúdo: centro;
cursor: ponteiro;
}

.closeAudio:hover {
peso da fonte: 600;
}

.botão autoplayPermission{
display: bloco embutido;
fronteira: nenhuma;
preenchimento: 4px;
raio da borda: 5px;
cor preta;
plano de fundo: #ebe9e9;
}
Botão .autoplayPermission:hover {
cor branca;
fundo: preto;
}
.audioContainer {
posição: fixa;
inferior: 5%;
preenchimento: 0 3%;
índice z: 2;
exibição: flexível;
-webkit-touch-callout: nenhum; /* Safári iOS */
-webkit-user-select: nenhum; /* Safári */
-khtml-user-select: nenhum; /* HTML do Konqueror */
-moz-user-select: nenhum; /* Versões antigas do Firefox */
-ms-user-select: nenhum; /* Internet Explorer/Edge */
seleção de usuário: nenhum;
}
.audioWrapper {
largura: 250px;
posição: relativa;
exibição: flexível;
direção flexível: coluna;
}
.audios {
Mostrar nenhum;
}
.audioList{
largura: 100%;
plano de fundo: {{section.settings.track_bg}} ;
exibição: grade;
direção flexível: coluna;
raio da borda: 8px;
margem inferior: 8px;
transição: altura 0,5s de facilidade;
}
.activeContainer {
largura: 100%;
plano de fundo: {{section.settings.track_bg}} ;
exibição: flexível;
direção flexível: coluna;
raio da borda: 8px;
margem inferior: 8px;
transição: altura 0,5s de facilidade;
}
.audioAtivo {
Mostrar nenhum;
raio da borda: 8px;
}
.audioBox {
Mostrar nenhum;
}
.musicWrapper {
exibição: flexível;
justificar conteúdo: espaço ao redor;
alinhar itens: centro;
preenchimento: 2% 5%;
margem: 2% 0;
}
.imageWrapper {
ajuste ao objeto: contém;
largura: 30%;
estouro: oculto;
proporção: 1;
exibição: flexível;
alinhar itens: centro;
justificar-conteúdo: centro;
}
.imageWrapper img {
largura máxima: 100%;
altura máxima: 100%;
}
.audioTrack:hover .musicInfo {
cor preta;
peso da fonte: 600;
}
.musicInfo {
largura: 70%;
exibição: flexível;
justificar-conteúdo: centro;
direção flexível: coluna;
alinhar itens: centro;
}

.musicInfo span {
alinhamento de texto: centro;
}

.musicDurWrap {
largura: 90%;
altura: 85%;
Mostrar nenhum;
raio superior esquerdo da borda: 15px;
raio inferior esquerdo da borda: 15px;
direção flexível: coluna;
justificar-conteúdo: centro;
transição: largura 0,3s linear;
}

/*====== Posição de controle ======*/
.canto inferior direito {
direita: 0;
}
.inferior esquerdo {
esquerda: 0;
}
.vertical {
direita: 0;
altura: 0;
largura: automático;
justificar conteúdo: flex-end;
preenchimento: 0 !importante;
}

.upright .audioWrapper{
direção flexível: linha;
largura: 400px;
alinhar itens: centro;
justificar conteúdo: flex-end;
}
.upright.audioController {
largura: automático;
altura: 200px;
direção flexível: coluna;
margem: 0,5%;
preenchimento: 3% 1%;
}
.upright .volumeWrap:hover .rangeWrap {
altura: 28px;
}
.upright .volumeWrap:hover {
largura máxima: 95px;
}
.upright .volumeRange {
margem: 0;
justificar-conteúdo: centro;
}
.upright .volumeBox {
altura: automático;
preenchimento: 4px;
}
.upright .activeContainer {
margem inferior: 0;
}
.upright-top {
superior: 30%;
}
.upright-top .audioBox {
margem superior: 30%;
}

.upright-bottom {
superior: 80%;
}
.upright-bottom .audioBox {
margem inferior: 30%;
}
.centro vertical {
topo: 50%;
}

/*======Controladores ====*/
.audioController {
largura: 100%;
altura: 100%;
plano de fundo: {{section.settings.control_bg}} ;
posição: relativa;
preenchimento: 3%;
exibição: flexível;
justificar-conteúdo: espaço entre;
alinhar itens: centro;
borda: 1px preto sólido;
raio da borda: 5px;
}
.ao controle {
traço: preto;
largura: 20px;
exibição: flexível;
}
.control:hover {
acidente vascular cerebral: #A9A9A9;
preencha: #A9A9A9;
}

.prevCtrl {
transformar: girar (180 graus);
}

.pausePlay{
posição: relativa;
exibição: flexível;
alinhar itens: centro;
}
.pausePlay:hover * {
acidente vascular cerebral: #A9A9A9;
}

.shuffleÁudio {
exibição: flexível;
largura: 21px;
direção flexível: coluna;
justificar-conteúdo: centro;
alinhar itens: centro;
}

.shuffleAudio svg {
traço: preto;
largura: 21px;
exibição: flexível;
largura do traço:5;
}

.volumeWrap {
exibição: flexível;
alinhar itens: centro;
justificar conteúdo: flex-end;
}

.volumeWrap:hover .volumeBox {
plano de fundo: #909090;
}

.volumeWrap:hover .rangeWrap {
largura: 60%;
}

.volumeWrap:hover .volRange {
exibição: flexível;
}

/*=======Faixa de volume ====*/
.rangeWrap {
largura: 0;
altura: 85%;
exibição: flexível;
plano de fundo: #909090;
raio superior esquerdo da borda: 15px;
raio inferior esquerdo da borda: 15px;
direção flexível: coluna;
justificar-conteúdo: centro;
preenchimento: 8,5% 0;
transição: largura 0,3s linear;
}

.volRange{
largura: 100%;
margem: 0,4%;
Mostrar nenhum;
transição: exibição 0,3s linear;
}

.inputRange {
-webkit-aparência: nenhum;
aparência: nenhuma;
fundo: transparente;
fronteira: nenhuma;
}


.inputRange:foco {
esboço: nenhum;
}

.inputRange::-webkit-slider-thumb {
-webkit-aparência: nenhum;
aparência: nenhuma;
borda: 1px sólido #000;
altura: 10px;
largura: 10px;
raio da borda: 3px;
histórico: #DCDCDC;
cursor: ponteiro;
margem superior: -3px;
sombra da caixa: 0px 0px 2px #000;
}

.inputRange::-moz-range-thumb {
-webkit-aparência: nenhum;
aparência: nenhuma;
borda: 1px sólido #000;
altura: 10px;
largura: 10px;
raio da borda: 3px;
histórico: #DCDCDC;
cursor: ponteiro;
margem superior: -3px;
sombra da caixa: 0px 0px 2px #000;
}

.inputRange::-ms-thumb {
-webkit-aparência: nenhum;
aparência: nenhuma;
borda: 1px sólido #000;
altura: 10px;
largura: 10px;
raio da borda: 3px;
histórico: #DCDCDC;
cursor: ponteiro;
margem superior: -3px;
sombra da caixa: 0px 0px 2px #000;
}

/*===== Faixa de alcance =====*/
.inputRange:hover input[type=range]::-webkit-slider-thumb {
transformar: escala(1,2);
}

.inputRange::-webkit-slider-runnable-track {
largura: 100%;
altura: 5px;
cursor: ponteiro;
plano de fundo: rgba (0, 0, 0, 0,7);
raio da borda: 1,3px;
borda: 0,2px sólido rgba (0, 0, 0, 0,7);
}

.inputRange::-ms-track {
largura: 100%;
altura: 5px;
cursor: ponteiro;
plano de fundo: rgba (0, 0, 0, 0,7);
raio da borda: 1,3px;
borda: 0,2px sólido rgba (0, 0, 0, 0,7);
}

.inputRange::-moz-range-track {
largura: 100%;
altura: 5px;
cursor: ponteiro;
plano de fundo: rgba (0, 0, 0, 0,7);
raio da borda: 1,3px;
borda: 0,2px sólido rgba (0, 0, 0, 0,7);
}

.inputRange::-ms-fill-lower {
plano de fundo: #2a6495;
borda: 0,2px sólido #010101;
raio da borda: 2,6px;
}

.inputRange:focus::-ms-fill-lower {
plano de fundo: #3071a9;
}
.inputRange::-ms-fill-upper {
plano de fundo: #3071a9;
borda: 0,2px sólido #010101;
raio da borda: 2,6px;
}
.inputRange:focus::-ms-fill-upper {
plano de fundo: #367ebd;
}

/*==== Faixa de volume ====*/
.volumeBox {
altura: 87%;
exibição: flexível;
alinhar itens: centro;
posição: relativa;
preenchimento: 4px;
raio superior direito da borda: 15px;
raio inferior direito da borda: 15px;
}

.volume {
traço: preto;
largura: 20px;
exibição: flexível;
}
.volumeBox:hover svg.vol > * {
acidente vascular cerebral: #A9A9A9;
preencha: #A9A9A9;
}

.volumeBox:hover .mute > * {
acidente vascular cerebral: #A9A9A9;
preencha: #A9A9A9;
}

.silenciado{
traço: preto;
largura: 21px;
altura: 21px;
Mostrar nenhum;
}
.noteMenu svg > * {
preenchimento: preto;
}
.noteIcon {
largura: 23px;;
}
.noteMenu {
traço: preto;
preenchimento: não definido;
largura: 23px;
proporção: 1;
exibição: flexível;
justificar-conteúdo: centro;
alinhar itens: centro;
}
.noteMenu:hover svg > * {
acidente vascular cerebral: #A9A9A9;
preencha: #A9A9A9;
}
.shuffleAudio:hover svg {
acidente vascular cerebral: #A9A9A9;
preencha: #A9A9A9;
}

/*======Condições ======*/
.ativo {
pedido: {{totalAudio}} ;
exibição: grade;
sombra da caixa: 0px 0px 10px preto;
}
.esconder {
Mostrar nenhum;
}
.ativo .musicDurWrap {
exibição: flexível;
}
.activeAudio {
Mostrar nenhum;
}

.jogando {
largura: 25px;
preenchimento: 2px;
borda: 1px sólido;
plano de fundo: #ff2222;
raio da fronteira: 50%;
animação: gire 2s linearmente infinito;
}

@keyframes girar {
de {
transformar: girar (0 graus);
}
para {
transformar: girar (359 graus);
}
}

Tela somente @media e (largura máxima: 500px) {
.audioController {
largura: 60%;
preenchimento: 1%;
}

.volumeWrap {
margem direita: 3%;
}
.volumeWrap:hover .volumeBox {
preenchimento: 2%;
}
.rangeWrap {
preenchimento: 14,5% 0;
}
.musicInfo p {
altura da linha: 1,2;
}
}
</estilo>

{% schema %}
{
"name": "Fundo de áudio",
"configurações": [
{
"tipo": "caixa de seleção",
"label": "Reprodução automática de música",
"id": "autoplay_audio",
"padrão": falso,
"info": "É necessária interação antes da reprodução automática"
},
{
"tipo": "cor",
"label": "Cor de fundo do controle",
"id": "control_bg",
"padrão": "#808080"
},
{
"tipo": "cor",
"label": "Cor de fundo da faixa de áudio",
"id": "track_bg",
"padrão": "#f0f8ff"
},
{
"tipo": "selecionar",
"id": "posição_áudio",
"padrão": "canto inferior esquerdo",
"label": "Posição de áudio",
"opções": [
{
"valor": "canto inferior esquerdo",
"rótulo": "canto inferior esquerdo"
},
{
"valor": "canto inferior direito",
"rótulo": "canto inferior direito"
},
{
"valor": "vertical vertical-inferior",
"label": "vertical inferior"
},
{
"value": "vertical vertical-topo",
"label": "topo vertical"
},
{
"value": "vertical vertical-centro",
"label": "centro vertical"
}
]
}
],
"blocos": [
{
"tipo": "arquivo_áudio",
"nome": "arquivo de áudio",
"configurações": [
{
"tipo": "texto",
"id": "arquivo_áudio",
"label": "Insira o URL do áudio"
},
{
"type": "image_picker",
"id": "imagem",
"label": "Imagem do áudio"
},
{
"tipo": "texto",
"id": "artista_áudio",
"label": "Insira o artista do áudio"
}
]
}
]
}
{% endschema %}

3. Na pasta Layout, abra theme.liquid e encontre o {% section 'header' %} . Cole o código abaixo antes do código do cabeçalho.

{% section ' shopify-music-player ' %}

É isso. Curta a música!

Copied!
Voltar para o blogue

Deixe um comentário