MP3 파일에 HTML5 플레이어 임베드하기

아래 내용을 discourse 토픽에 그대로 붙여넣으면 HTML5 mp3 플레이어가 나올 거라고 기대했습니다. (이 임베드 소스는 제 Wordpress 사이트의 플러그인에서 가져온 것입니다.)

힌트나 아이디어가 있다면 알려주세요. … ??

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

CSP를 사용해보시는 건 어떨까요?

게시글에 붙여넣는 건가요, 아니면 …?

아, 그 문제가 정확히 보이는 것 같네요… WP 사이트를 허용하도록 CSP를 확장하는 쪽으로 좀 더듬어 보겠습니다 . . .

브라우저 콘솔 오류 로그를 확인해 보세요..

보안상의 이유로 Discourse의 게시물에서는 절대 임의로 붙여넣은 JS가 실행되지 않습니다.

필요한 모든 것이 iframe을 통해 제공된다면, 사이트 설정에서 해당 도메인을 허용하고 주제를 붙여넣을 수 있습니다.

관리자 화면에서 CSP를 완전히 꺼 보았습니다(iframe이 제대로 작동하지 않는 원인이 CSP 때문인지 확인해 보기 위해서입니다). 참고로 제가 붙여넣을 전체 내용은 제 첫 글의 코드 블록에 있습니다.

그래도 여전히 작동하지 않습니다… 흥미롭게도 콘솔 에러는 3개만 뜨고, 전부 Dsicourse CDN에서 나옵니다… 코드는 “learn more” 바로 앞에 삽입되어 있습니다.

:confused: …말씀해 주시니 이제 이해가 되네요.

사용 중인 Wordpress 플러그인에서 일괄 복사한 임베드 코드를 그대로 붙여넣으려고 했거든요. mp3 오디오 파일을 위한 HTML5 플레이어를 임베드하고 싶었거든요. 그러니까 그건 안 되겠네요. 아쉽네요.

기본적으로 임베드 및 비임베드 플레이어에 대한 광범위한 지원을 제공합니다.

Youtube

Vimeo

SoundCloud

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

MP3 및 MP4 파일을 직접 업로드하면 플레이어로 변환됩니다.

…그래도 그게 다른 서버에서 Open Graph가 올바르게 전송되는 데 전적으로 의존하는 것 아닌가요? (저는 그 SoundCloud 임베드를 전에 봤고/사용해봤어요—정말 최고였죠.)

제 WordPress 사이트는 Open Graph를 보내긴 하지만, 충분히 똑똑한 OG를 보내지는 못하거든요…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ 는 HTML5 플레이어가 있는 페이지인데… 이 페이지는 제가 기대하고 바랐던 대로 정확히 원박스(onebox) 처리가 됩니다…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ 는 미디어 항목에 대한 WP URL인데… 하지만 역시 WP는 정말 똑똑한 원박스를 만들기에 충분한 OG 정보를 보내지 못합니다…

…MP3 파일을 직접 업로드해볼게요… 제 호스팅된 Discourse에 약 40Mb짜리 mp3 파일(에피소드 80개 이상)을 올릴 수 있을지 확신이 서지 않네요 . . .

한 줄로 mp3 파일 링크를 추가하는 경우:

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

다음과 같이 표시됩니다:

mp3 확장자 업로드를 허용했는데, 이제 크기 제한에 부딪혔습니다.

…이는 당연한 일입니다.

실제로 이미 파일 공유 서비스(우리 웹사이트)에 해당 파일들을 보유하고 있습니다… 하지만 맨 mp3 파일 URL을 넣으면 그냥 기본적인 브라우저 기반 플레이어만 표시됩니다 [적어도 다음 줄이 그렇다고 생각합니다]

좋은 첫걸음입니다.

이제 다음 중 하나를 찾아볼 수 있습니다:

  • iframe을 활용하여 WordPress와 Discourse 양쪽에 사용할 수 있는 더 나은 임베드 팟캐스트 플랫폼
  • 현재 WordPress의 플레이어를 Discourse로 이식하기

…네, 바로 제가 부딪히길 두려워했던 바위였네요. 팟캐스트 호스팅/솔루션을 전부 다시 만들어야 합니다. (불가능하진 않지만, 결코 쉽지 않은 일이죠.)

…아마도 Castos(WordPress에서 우리가 사용 중인 Seriously Simple Podcasting 플러그인을 만든 곳)에 기능 요청을 넣을 수 있을 것 같습니다. 정확히 어떤 OG 정보가 필요한지, 그리고 이를 통해 SoundCloud 스타일의 아름다운 원박스 플레이어를 만들 수 있는지 설명하는 요청이죠.

:man_shrugging:

일부 서비스에서는 제공되는 콘텐츠에 임베드 가능한 플레이어를 포함하는 것 같습니다. 예를 들어, 구글 검색 결과의 첫 번째 항목처럼요:

네. 제 꿈은 이제 팟캐스트에서 흔히 볼 수 있는 MP3 파일의 챕터 마크를 이해하고 지원하며, 특정 타임코드로 " 건너뛰기" 기능을 지원하는 플레이어를 찾는 것입니다. 저는 쇼의 노트를 포함하여 오디오에서 올바른 위치로 이동시키고 챕터 사이를 건너뛸 수 있는 복잡한 주제 게시글을 작성하려고 시도했습니다. (하지만, 본론에서 벗어나네요. 이건 Discourse 자체와는 아무런 관련이 없습니다. :slight_smile: