DEV Community

Cover image for How to embed a Changelog Podcast Player into a React app?
Antoni Kępiński
Antoni Kępiński

Posted on

How to embed a Changelog Podcast Player into a React app?


I recently had a chance to do a small redesign of my personal site. One of the goals, besides making everything look cleaner, was to embed Changelog's Podcast Player, so that it would play 85th episode of JS Party, in which I talked about one of my projects.

It seems pretty straight forward:

<audio data-theme="night" data-src="" src="" preload="none" class="changelog-episode" controls></audio><p><a href="">JS Party 85: Building PizzaQL at the age of 16</a> – Listen on <a href=""></a></p><script async src="//"></script>
Enter fullscreen mode Exit fullscreen mode

And works just fine on a static HTML site. However, in my case, I was dealing with a React application, powered by Next.js with Static Site Generation (SSG). I also focused much on performance and accessibility.

That's exactly why I decided to make this tutorial!


First of all, we need to embed an audio tag into our app. It's fairly easy:

Enter fullscreen mode Exit fullscreen mode

Make sure to replace data-src and src attributes so that they link to an episode, which you want to embed. It does not need to be the JS Party podcast.

We now need to load a script, which will add an iframe with the player itself. Normally, we would obtain it from, but instead, we are going to self-host it. Here are the reasons why:

  • Self-hosting assets (like fonts or scripts) is significantly faster;
  • The default Changelog's script does not add a title attribute to the created iframe - this will lower our site accessibility score on tools like Lighthouse;
  • The default Changelog's script sometimes throws Uncaught TypeError: Cannot read property 'postMessage' of null..*

*This does not break the functionality of the player and therefore we can easily fix it using a try...catch statement.

In order to edit the embed script, we first need to unminify the original one from Changelog's CDN. We can then modify it like so:

!(function (e) {
    function t(t) {
        var r = t.getAttribute("data-src"),
            i = t.getAttribute("data-theme") || "night",
            n = e.createElement("iframe");
        n.setAttribute("src", r + "?theme=" + i + "&referrer=" + e.location.href),
            n.setAttribute("width", "100%"),
            n.setAttribute("height", "220"),
            n.setAttribute("scrolling", "no"),
            n.setAttribute("frameborder", "no"),
+           n.setAttribute("title", "Podcast"),
            t.parentNode.replaceChild(n, t),
            ( = +new Date()),
            (this.src = n.src),
            (this.iframe = n);
    var r = "",
        i = e.getElementsByClassName("changelog-episode"),
        n = [],
        a = function (e, t) {
-            (t.context = "player.js"), (t.version = "0.0.11"), (t.listener =, e.iframe.contentWindow.postMessage(JSON.stringify(t), r);
+            try {
+                (t.context = "player.js"), (t.version = +"0.0.11"), (t.listener =, +e.iframe.contentWindow.postMessage(JSON.stringify(t), r);
+            } catch {}
    window.addEventListener("message", function (e) {
        if (e.origin !== r) return !1;
        var t = JSON.parse(;
        if ("player.js" !== t.context) return !1;
        if ("ready" === t.event) for (var i = n.length - 1; i >= 0; i--) n[i].src === t.value.src && a(n[i], { method: "addEventListener", value: "play" });
        if ("play" === t.event) for (i = n.length - 1; i >= 0; i--) n[i].id !== t.listener && a(n[i], { method: "pause" });
    for (var s = i.length - 1; s > -1; s--) n.push(new t(i[s]));

Enter fullscreen mode Exit fullscreen mode

We are going to load the script in a useEffect hook so that it won't run on the server (where a browser API, like document and window, isn't available):

useEffect(() => {
    const script = document.createElement('script');
    script.src = '/embed.js'; // Since I'm using Next.js I can place the file in the `public` folder and refer to it like so.
    script.async = true; // Make sure the script isn't render-blocking.
    script.defer = true;
}, []);
Enter fullscreen mode Exit fullscreen mode

That's it! You now have a beautiful player on your site.


The approach of using the useEffect hook was taken from React NodeGui website source code.

Thank you for reading my post! I hope you will find it useful ;)

Top comments (0)