Ability to create a button that triggers a specific episode

Wishlist Podcast Player
1

It would be great to create play buttons across website that can trigger a specific episode to play.

1 Like
2

@Manuel4 thanks a lot for this nice suggestion!

We’ll try to consider it in our future updates :slight_smile:

Many thanks for your help and welcome to the Elfsight Community! Feel free to vote for other ideas or ask questions, we’re always here for you :hugs:

3

Hello Manuel,

You can do it by adding this script in the config menu of your widget.
Go in Style => Custom JS (don’t forget to publish the widget).

    const params = new URLSearchParams(window.location.search);
    const title = params.get('title');

    if (title) {
        const observer = new MutationObserver(function (mutationsList, observer) {
            for (let mutation of mutationsList) {
                node = mutation.target;
                if (node.nodeName == "DIV" && node.getAttribute('class') == 'ProgressBar__TimeEnd-sc-10df7rt-6 gcjzKW') {
                    document.querySelector(`div[title="${title}"]`).click();
                    observer.disconnect();
                    document.querySelector('div[class="DefaultButton__IconComponent-sc-1hh23tw-0 josFGk Pause__Component-sc-1g2atex-0 edhjfi"]').click();
                }
            }
        });
        observer.observe(document, { childList: true, subtree: true });
    }


On you website create a button or a link and replace the title parameter in the link with the title of your podcast episode.

<a href="https://widget-XXX.elfsig.ht/?title=EPISODE_NAME">Go the episode</a>

It’s not very sturdy but it gets the job done.

1 Like
5

Hi @Cyril, this is absolutely awesome, thank you so much for providing a solution! :heart_eyes:

Our devs extend you their respect and share a couple of notes, since you seem to know a thing or two at coding :slight_smile:

  1. The code you shared contains a complete name of classes, which might get changed after any minor update in the widget, thus the code might stop working. They believe the following code will make it more stable:
const params = new URLSearchParams(window.location.search);
const title = params.get('title');

if (title) {
    const observer = new MutationObserver(function (mutationsList, observer) {
        for (let mutation of mutationsList) {
            node = mutation.target;
            if (node.nodeName === "DIV" && node.getAttribute('class').includes('ProgressBar__TimeEnd-sc')) {
                document.querySelector(`div[title="${title}"]`).click();
                observer.disconnect();
                document.querySelector('div[class*="Pause__Component-sc"]').click();
            }
        }
    });
    observer.observe(document, { childList: true, subtree: true });
}
  1. The idea to monitor changes throughout the entire DOM tree using a MutationObserver might appear to be not the best one. It’s worth either trying to eliminate it or configuring the observer to track changes specifically within the widget, rather than on the entire page (since it’s designed to monitor changes in a specific block of our widget).

@Cyril I hope you don’t mind us making these notes :slight_smile: And once again, a huge thank you for your help, it’s always greatly appreciated! :fire:

6

I don’t mind at all, on the contrary, I didn’t know includes() method. I will use it intensively thanks for the tips :+1:

1 Like
7

That’s the collaboration! I hope to see you around, Cyril :slight_smile: