# Embed HTML5 player for MP3 file

**URL:** https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970
**Category:** Support
**Created:** [27 juli 2020 om 17:06 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970 "2020-07-27T17:06:42Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:06 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/1 "2020-07-27T17:06:42Z")

</div>

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

````plaintext
<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>```
````

---

<div class="post-metadata">

### Author: ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow)
#### Post date: [27 juli 2020 om 17:14 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/2 "2020-07-27T17:14:35Z")

</div>

CSP maybe?

> [@Mitigate XSS Attacks with Content Security Policy](https://meta.discourse.org/t/mitigate-xss-attacks-with-content-security-policy/104243):
>
> bookmark 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. person_raising_hand 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…

Are you pasting it into post or …?

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:18 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/3 "2020-07-27T17:18:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow)
#### Post date: [27 juli 2020 om 17:20 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/4 "2020-07-27T17:20:01Z")

</div>

Check the browser console error log ..

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [27 juli 2020 om 17:23 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/5 "2020-07-27T17:23:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:23 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/6 "2020-07-27T17:23:52Z")

</div>

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”

 ![Screen Shot 2020-07-27 at 1.23.22 PM](https://global.discourse-cdn.com/meta/original/3X/2/8/28aaab71f687259d2728777e587f7219d04e8b65.png)

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:26 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/7 "2020-07-27T17:26:14Z")

</div>

> [@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.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [27 juli 2020 om 17:29 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/8 "2020-07-27T17:29:08Z")

</div>

> [@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

[![](https://global.discourse-cdn.com/meta/original/3X/2/4/24230eca81bc131919638980988110e54248802e.jpeg "lofi hip hop radio - beats to relax/study to") ](https://www.youtube.com/watch?v=5qap5aO4i9A)

### Vimeo

[![](https://global.discourse-cdn.com/meta/original/4X/8/1/c/81c89e41e5bcf628ac882d203bd7d1f94063e369.jpeg "WE ARE GEORGE FLOYD") ](https://vimeo.com/425396315)

### SoundCloud

[https://soundcloud.com/silkmusic/silkm265-1?in=silkmusic/sets/silkm265](https://soundcloud.com/silkmusic/silkm265-1?in=silkmusic/sets/silkm265)

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

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:32 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/9 "2020-07-27T17:32:38Z")

</div>

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

> **[Cara-Michele Nether: Aikido, wellness, and honesty](https://moversmindset.com/cara-michele-nether-aikido-wellness-and-honesty/)**
>
> How can personal experiences with Aikido and wellness practices be used to help others improve their lives through self-awareness, physical health, and personal

`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](https://moversmindset.com/cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/)**
>
> "083. Cara-Michele Nether: Aikido, wellness, and honesty" from Movers Mindset by Movers Mindset.

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [27 juli 2020 om 17:36 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/10 "2020-07-27T17:36:47Z")

</div>

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

[https://moversmindset.com/wp-content/uploads/2020/07/MM\_083\_Cara\_Michele\_Nether.mp3](https://moversmindset.com/wp-content/uploads/2020/07/MM_083_Cara_Michele_Nether.mp3)

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:37 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/11 "2020-07-27T17:37:36Z")

</div>

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

 ![Screen Shot 2020-07-27 at 1.36.00 PM](https://global.discourse-cdn.com/meta/original/3X/0/8/085f02a242e9b2815c90f3cdbdc21f87d00875d4.png)

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

[https://moversmindset.com/wp-content/uploads/2020/07/MM\_083\_Cara\_Michele\_Nether.mp3](https://moversmindset.com/wp-content/uploads/2020/07/MM_083_Cara_Michele_Nether.mp3)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [27 juli 2020 om 17:38 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/12 "2020-07-27T17:38:12Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [27 juli 2020 om 17:40 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/13 "2020-07-27T17:40:29Z")

</div>

> [@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.

🤷‍♂️

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [27 juli 2020 om 18:14 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/14 "2020-07-27T18:14:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [28 juli 2020 om 10:46 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/15 "2020-07-28T10:46:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [27 augustus 2020 om 10:46 UTC](https://meta.discourse.org/t/embed-html5-player-for-mp3-file/158970/16 "2020-08-27T10:46:38Z")

</div>

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