Incorporar player HTML5 para arquivo MP3

[craigconstantine]

Eu esperava apenas colar o conteúdo abaixo em um tópico do Discourse e obter um player de áudio HTML5. (Essa fonte incorporada vem de um plugin no meu site WordPress.)

Dicas, ideias, … ??

<blockquote class="wp-embedded-content"><a href="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/">083. Cara-Michele Nether: Aikido, wellness, and honesty</a></blockquote>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
		/*! This file is auto-generated */
		!function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),c=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]');for(r=0;r<c.length;r++)c[r].style.display="none";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute("style"),"height"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if("link"===t.message)if(s=l.createElement("a"),n=l.createElement("a"),s.href=a.getAttribute("src"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",t,!1),d.addEventListener("load",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf("MSIE 10"),s=!!navigator.userAgent.match(/Trident.*rv:11\./),n=l.querySelectorAll("iframe.wp-embedded-content");for(t=0;t<n.length;t++){if(!(r=n[t]).getAttribute("data-secret"))a=Math.random().toString(36).substr(2,10),r.src+="#?secret="+a,r.setAttribute("data-secret",a);if(i||s)(e=r.cloneNode(!0)).removeAttribute("security"),r.parentNode.replaceChild(e,r)}}}}(window,document);
//--><!]]>
</script><iframe sandbox="allow-scripts allow-same-origin" security="restricted" src="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/embed/" width="500" height="350" title="&#8220;083. Cara-Michele Nether: Aikido, wellness, and honesty&#8221; &#8212; movers mindset" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>

[Overgrow]

CSP talvez?

Mitigate XSS Attacks with Content Security Policy

This guide explains how to use Content Security Policy (CSP) to mitigate Cross-Site Scripting (XSS) attacks in Discourse. It covers CSP basics, configuration, and best practices. Required user level: Administrator Summary Content Security Policy (CSP) is a crucial security feature in Discourse that helps protect against Cross-Site Scripting (XSS) and other injection attacks. This guide covers the basics of CSP, how it’s implemented in Discourse, and how to c…

Você está colando isso em uma postagem ou…?

[craigconstantine]

oooooooooh, isso parece exatamente o problema… Vou mexer na extensão da CSP para permitir o site do WP…

[Overgrow]

Verifique o log de erros do console do navegador..

[Falco]

Posts no Discourse nunca permitirão a execução de JS colado aleatoriamente por questões de segurança.

Se tudo que você precisa é fornecido pelo iframe, você pode permitir esse domínio específico nas configurações do site e colá-lo em um tópico.

[craigconstantine]

Desativei completamente o CSP no painel administrativo (apenas para ver se era isso que impedia meu iframe de funcionar corretamente) observe que todo o conteúdo que estou colando está no bloco de código na minha postagem original.

ainda não funciona… curiosamente, recebo apenas três erros no console, todos provenientes do CDN do Discourse . . . o código é inserido logo antes de “saiba mais”

[craigconstantine]

@Falco

As postagens no Discourse nunca permitirão que JS colado aleatoriamente seja executado por questões de segurança.

…ah, faz sentido agora que você disse isso.

Eu esperava apenas copiar e colar um monte de código de incorporação do plugin do WordPress que estou usando; eu queria incorporar um player HTML5 para arquivos de áudio mp3. Então, isso não vai funcionar. Que pena.

[Falco]

@craigconstantine

Eu queria incorporar um player HTML5 para arquivos de áudio mp3. Então, isso não vai funcionar. Que pena.

Temos extenso suporte para players incorporados e não incorporados, pronto para uso.

Youtube

lofi hip hop radio - beats to relax/study to

Vimeo

WE ARE GEORGE FLOYD

SoundCloud

https://soundcloud.com/silkmusic/silkm265-1?in=silkmusic/sets/silkm265

Você pode até fazer upload de arquivos MP3 e MP4 diretamente e eles se tornarão um player.

[craigconstantine]

…é, mas isso tudo não depende do Open Graph estar sendo enviado corretamente pelo outro servidor? (Já vi/usado esses embeds do SoundCloud antes — são incríveis.)

Meu site WordPress envia Open Graph, mas não envia OG inteligente o suficiente…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ é uma página com um player HTML5… essa aqui gera um onebox exatamente como eu esperava/queria…

Cara-Michele Nether: Aikido, wellness, and honesty

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ é a URL do WordPress para o item de mídia… mas, novamente, o WP não é inteligente o suficiente para enviar informações OG suficientes para um onebox realmente inteligente…

083. Cara-Michele Nether: Aikido, wellness, and honesty

…Vou tentar fazer o upload do arquivo MP3 diretamente… não sei se consigo colocar um MP3 de ~40MB (x 80+ episódios) no meu Discourse hospedado…

[Falco]

Adicionar um link para um arquivo mp3 em uma única linha como:

https://moversmindset.com/podcast-player/7711/083-cara-michele-nether-aikido-wellness-and-honesty.mp3

se torna

[craigconstantine]

Permiti a extensão mp3 para upload, mas esbarrei em um limite de tamanho.

…o que faz sentido.

Na verdade, eles já estão em um serviço de compartilhamento de arquivos (nosso próprio site)… mas quando coloco um URL de arquivo mp3 puro, obtenho apenas um player básico baseado no navegador [pelo menos é isso que acho que a próxima linha indica].

[Falco]

Esse é um bom primeiro passo.

A partir daqui, você pode começar a pesquisar opções para:

• Uma plataforma de podcast com incorporação (embed) melhor, que possa ser usada tanto no WordPress quanto no Discourse, aproveitando iframes

• Migrar seu player atual do WordPress para o Discourse.

[craigconstantine]

@Falco

A partir daqui, você pode começar a pesquisar opções para:

• Uma plataforma de podcast incorporado melhor que possa ser usada tanto no WordPress quanto no Discourse, aproveitando iframes.

…sim, é exatamente essa pedra onde eu temia que eu fosse naufragar. Eu teria que refazer toda a nossa solução de hospedagem de podcasts. (Não é impossível, mas também não é trivial.)

…talvez eu possa enviar uma solicitação de recurso para o Castos (que desenvolve o plugin Seriously Simple Podcasting para WordPress, que estamos usando) explicando exatamente quais informações OG são necessárias para criar um player onebox bonito, semelhante ao SoundCloud.

[Falco]

Parece que alguns serviços oferecem players incorporáveis em suas ofertas, como o primeiro resultado do meu Google:

[craigconstantine]

Sim. Meu sonho é encontrar um player que compreenda/suporte as marcações de capítulos em arquivos MP3, que agora são comuns em podcasts, e que também permita “pular para” códigos de tempo específicos. Eu estava tentando criar um tópico complexo para um episódio que incluía notas do programa levando o player ao ponto correto no áudio e a capacidade de pular entre os capítulos. (Mas, estou divagando. Isso não tem nada a ver com o Discourse em si.