Tema WordPress de áudio fixado

Republicado por Platão

seguidores: 0

Receio ter que começar com toda uma história de fundo, já que a jornada aqui é o ponto, não tanto o tema.

Um cara me escreveu há algum tempo descrevendo uma situação em que estava. Sua empresa tem vários sites WordPress para rádios públicas, muitos dos quais são essencialmente locais para podcasts. Há uma funcionalidade específica que ele considerou ideal para todos eles: ter um reprodutor de áudio “fixado”. Como se você pudesse reproduzir um podcast e continuar navegando pelo site sem que o podcast pare.

Isso é um tanto complicado de realizar no WordPress, porque o WordPress recarrega a página inteira como qualquer outro site normal, sem fazer nada de especial com o manuseio de links ou manipulação de histórico. Quando uma página é recarregada, qualquer áudio da página para de ser reproduzido. É assim que a web funciona.

Então, como você faria isso em um site WordPress? Bem, você poderia torná-lo um site WordPress sem cabeça e reconstruir todo o front-end como um aplicativo de página única. Parece divertido para mim, mas hesitaria em fazer essa ligação apenas por para esta um coisa.

O que mais você poderia fazer? Você pode encontrar uma maneira de fazer com que a página nunca seja recarregada. Lembro-me de fazer isso em um pequeno site estático há 10 anos, mas esse não era um site WordPress completo e nem me preocupei em atualizar o URL naquela época.

E se você fizesse isso…

Interceptar cliques em links internos
Ajax fez o conteúdo desse URL
Substituiu o conteúdo da página por esse novo conteúdo

Farei isso em jQuery rapidamente para você:

$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});

Isso não está longe de ser literalmente funcional. Você gostaria de assistir a popstate evento para lidar com o botão Voltar, mas isso são apenas mais algumas linhas.

Neste mundo hipotético, você organizaria o site assim:

<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>

Então tudo isso <main> o conteúdo é trocado, o URL muda, mas seu <audio> jogador é deixado sozinho para continuar jogando em paz. Você escreveria mais JavaScript para dar às pessoas uma maneira de atualizar o podcast que está tocando e tal.

Acontece que há mais em que pensar aqui. Algum script embutido no conteúdo será executado? Que tal atualizar o <title> também? Existem preocupações de borda suficientes que você provavelmente ficará irritado ao lidar com isso.

Eu queria brincar com essas coisas, então criei um tema WordPress e procurei Turbo em vez de escrever algo à mão. Turbo (a nova versão do Turbolinks) foi projetado exatamente para isso. É uma biblioteca JavaScript que você coloca na página (sem processo de construção, sem configuração) e simplesmente funciona. Ele intercepta cliques em links internos, Ajax para novos conteúdos, etc. Mas tem um recurso interessante onde se você colocar um data-turbo-permanent atributo em um elemento HTML, ele persistirá durante a recarga. Então eu fiz isso para o reprodutor de áudio aqui.

Mas o problema é o seguinte.

Simplesmente não tenho tempo para terminar este projeto corretamente. Foi divertido fazer uma peça, mas meu interesse por ela diminuiu. Então vou deixar isso de lado por enquanto:

It quase funciona, menos um bug flagrante de que o áudio para de tocar na primeira navegação e funciona depois disso. Tenho certeza de que pode ser corrigido, mas simplesmente não tenho muita pele neste jogo. Acho que vou desistir e deixar esse código para alguém pegar, se for útil para eles.

Outra coisa em jogo aqui é que o Turbo é do Basecamp, e o Basecamp tem bastante implodido recentemente, fazendo com que não fosse ótimo usar seu software. Exacerbado pelo fato de Sam Stephenson escreveu 75% do Turbo e disse que não tocará nele (ou em outros projetos relacionados) a menos que o software seja movido para sua própria base. Turbo já estava em uma situação instável, pois parecia Buggy comparado ao Turbolinks, e agora está ligado muito terreno nodoso.

Fonte: https://css-tricks.com/pinned-audio-wordpress-theme/

Carimbo de hora: 18 de maio de 2021