Embed HTML5 player for MP3 file

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>```
1 Like

CSP maybe?

Are you pasting it into post or …?

1 Like

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

1 Like

Check the browser console error log …

1 Like

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.

2 Likes

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”

1 Like

:confused: …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.

1 Like

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

Youtube

Vimeo

SoundCloud

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

3 Likes

…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…

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…

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

1 Like

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

2 Likes

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]

1 Like

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.

2 Likes

…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.

:man_shrugging:

1 Like

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

3 Likes

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. :slight_smile:

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.