'How do I pause the Mixcloud widget when play a new one?

Mixcloud widget API: https://www.mixcloud.com/developers/widget/

I have a page with several mixcloud widgets. If none of them are playing, pressing Play plays the selected widget. If I play a second widget, it plays simultaneously with the first one. I'd like to make it so hitting play on a widget will pause the previous widget and only play the new one.

<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>
<script type="text/javascript">
    var widget = Mixcloud.PlayerWidget(document.getElementById("my-widget-iframe1"));
    widget.events.play.on(pauseListener);
    function pauseListener() {
        widget2.togglePlay();
    });

    var widget2 = Mixcloud.PlayerWidget(document.getElementById("my-widget-iframe2"));
    widget2.events.play.on(pauseListener);
    function pauseListener() {
        widget.togglePlay();
    });
</script>
<iframe id="my-widget-iframe1" width="100%" height="120" src="link1" frameborder="0" ></iframe>
<iframe id="my-widget-iframe2" width="100%" height="120" src="link2" frameborder="0" ></iframe>

That's just the latest example of what I tried. My pages have more than 2 widgets so I want to be able to know which widget is currently playing and to pause that particular one. The example above is trying to brute force toggle the other widget.

If you need any other info from me, please ask. Thanks for the help or suggestions.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source