Embed HTML5 player for MP3 file

[craigconstantine]

I was hoping to just paste the below into a discourse topic and get an HTML5 mp3 player. (This embedded source comes from a plugin on my Wordpress site.)

Pointers, thoughts, … ??

<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 (OG)]

CSP maybe?

Mitigate XSS Attacks with Content Security Policy

What is Content Security Policy? Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware. – Content Security Policy (CSP) - HTTP | MDN XSS is still one of the most common web vulnerability – if someone else can run scripts on your site, it is not your site anymore. …

Are you pasting it into post or …?

[craigconstantine]

oooooooooh, that looks exactly like the problem… I’ll fiddle with extending the CSP to allow the WP site . . .

[Overgrow (OG)]

Check the browser console error log …

[Falco (Rafael dos Santos Silva)]

Posts in Discourse will never allow random pasted JS to run because of security.

If all you need is provided by the iframe, you can allow this specific domain in the site settings and paste it in a topic.

[craigconstantine]

I turned the CSP off entirely in the admin (just to see if that’s what’s preventing my iframe from working correctly) note that the full stuff I’m pasting is in the code block in my OP.

still doesn’t work… curiously, I only get three console errors, all from Dsicourse’s CDN . . . the code is inserted just before “learn more”

[craigconstantine]

@Falco

Posts in Discourse will never allow random pasted JS to run because of security.

…oh, that makes sense now that you say it.

I was hoping to just copy-n-paste a pile of embed code from the Wordpress plugin I’m using; I wanted to embed an HTML5 player for mp3 audio files. So, that’s not going to work. bummer.

[Falco (Rafael dos Santos Silva)]

@craigconstantine

I wanted to embed an HTML5 player for mp3 audio files. So, that’s not going to work. bummer.

We have extensive support for embed and non-embed players, out of the box.

Youtube

lofi hip hop radio - beats to relax/study to

Vimeo

SoundCloud

You can even upload MP3 and MP4 files directly and they become a player.

[craigconstantine]

…yeah, but isn’t that all based on Open Graph being correctly sent from the other server? (I’ve seen/used those soundcloud embed before—they are awesome.)

My Wordpress site sends open graph, but it doesn’t do clever-enough OG…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ is a page with an HTML5 player on it… this oneboxes exactly as I’d expect/hope it would…

083. 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/ is the WP url for the media item… but again, WP is not smart enough to send enough OG information for a really clever onebox…

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

…I’ll try uploading the MP3 file directly… not sure if I can drop ~40Mb mp3 ( times 80+ episodes) into my hosted Discourse though . . .

[Falco (Rafael dos Santos Silva)]

Adding a link to a mp3 file in a single line like:

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

becomes

[craigconstantine]

I allowed mp3 extension for upload, but I just bump into a size limit

…which makes sense.

I effectively have them already on a file sharing service (our own web site)… but when I drop a naked mp3 file URL I just a get a bare bones browser-based player [at least, that’s what I think the next line is]

[Falco (Rafael dos Santos Silva)]

That is a good first step.

From here you can start shopping around for either:

• A better embed podcast platform that you can use in both wordpress and Discourse leveraging iframes

• Porting your current player from wordpress into Discourse.

[craigconstantine]

@Falco

From here you can start shopping around for either:

• A better embed podcast platform that you can use in both wordpress and Discourse leveraging iframes

…yeah, that’s the rock I was afraid I’d be wrecked on. I’d have to redo our entire podcasting hosting/solution. (Not impossible, but also not trivial.)

…maaaaaaaybe I can put a feature request into Castos (who makes the Seriously Simple Podcasting plugin for Wordpress which we are using) that explains exactly what OG information is needed to make a beautiful, soundcloud-esque onebox player.

[Falco (Rafael dos Santos Silva)]

Looks like some services do feature embedable players in their offering, like my first google result:

[craigconstantine]

Yeup. My dream is to find one that understands/supports the chapter marks in MP3 files which are now common in podcasts, and which support “skip to” specific time codes. I was trying to build a complex topic post for an episode which included notes from the show that sent the player to the correct spot in the audio, and the ability to skip among chapters. (But, I digress. This has nothing to do with Discourse itself.