Soundcloud API: Playing correct sound

Question

Context: This is a Soundcloud API javascript and iframe that plays the sound of the soundcloud link when you hover over the link. The link is inputted into a table just so you know.

Problem: The problem is that when I hover over a link that I input into the table i.e say I put multiple links (each connected to a different sound) in the table but when I hover over each link they only play the sound of the first link in the table; The other links in the table does not play their appropriate sounds. Can someone help me modify the code below to fix this issue? Provide the modified code integrated with the original code below.

HTML (Iframe the src is customized to play that particular link):

<div class="clickme">
    <iframe id="sc-widget" width="300" height="200" allow="autoplay"
    src="https://w.soundcloud.com/player/?url=https://soundcloud.com{{-list2[1]-}}&show_artwork=true"
    frameborder="0" style="display: none">                                   
    </iframe>
</div>

Javascript(Soundcloud API):

<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function () {
            var widgetIframe = document.getElementById('sc-widget'),
                widget = SC.Widget(widgetIframe);

            widget.bind(SC.Widget.Events.READY, function () {
                widget.bind(SC.Widget.Events.PLAY, function () {
                    // get information about currently playing sound
                    console.log('sound is beginning to play');

                });
                // get current level of volume
                widget.getVolume(function (volume) {
                    console.log('current volume value is ' + volume);
                });
                // set new volume level
                widget.setVolume(50);
                // get the value of the current position
                widget.bind(SC.Widget.Events.FINISH, function () {
                    // get information about currently playing sound
                    console.log('replaying sound');
                    widget.seekTo(0);
                    widget.play();
                });
            });

            // Shorthand for $( document ).ready()
            // A $( document ).ready() block.
            $(document).ready(function () {
                console.log("ready!");
                var menu = document.getElementsByClassName("clickme");
                for (i = 0; i < menu.length; i++) {
                    var list = menu[i];

                    var link = String(list.outerHTML)
                    if (link.includes('soundcloud')) {

                        
                        list.addEventListener("mouseenter", function (event) {
                            
                            console.log('start soundcloud');
                            widget.play();

                        });
                        list.addEventListener("mouseleave", function (event) {
                            
                            console.log('pause soundcloud ');
                            widget.pause();
                        });
                    }
                }

            });
        }());
    </script>

Answer 1

The problem is that you're hard-coding the soundcloud player to the first iframe with an id of sc-widget by the following lines:

            var widgetIframe = document.getElementById('sc-widget'),
                widget = SC.Widget(widgetIframe);

To be able to play a different track on hovering, the widget needs to be populated with the proper iframe.

So these are the steps needed. If a user hovers over one of the container divs

• Check if the user already hovered this specific item.
• In case he did, resume the sound.
• In case he didn't unbind any events from the widget if there are any, initialize the widget with the iframe, bind the required events and start playback from the beginning.
• If the user leaves a container div with the mouse, stop playback if there is something playing at all.

Here's a working example:

let widget;
let currentWidget;

$(document).ready(function() {
  console.log("ready!");
  var menu = document.getElementsByClassName("clickme");
  for (i = 0; i < menu.length; i++) {
    var list = menu[i];
    var link = String(list.outerHTML);

    if (link.includes('soundcloud')) {
      list.addEventListener("mouseenter", function(event) {


        if (event.currentTarget.childNodes[1] == currentWidget) {
          widget.play();
        } else {
          if (widget) {
            widget.unbind(SC.Widget.Events.PLAY);
            widget.unbind(SC.Widget.Events.READY);
            widget.unbind(SC.Widget.Events.FINISH);
          }

          widget = SC.Widget(event.currentTarget.childNodes[1]);

          widget.bind(SC.Widget.Events.READY, function() {
            widget.bind(SC.Widget.Events.PLAY, function() {
              // get information about currently playing sound
              console.log('sound is beginning to play');

            });
            // get current level of volume
            widget.getVolume(function(volume) {
              console.log('current volume value is ' + volume);
            });
            // set new volume level
            widget.setVolume(50);
            // get the value of the current position
            widget.bind(SC.Widget.Events.FINISH, function() {
              // get information about currently playing sound
              console.log('replaying sound');
              widget.seekTo(0);
              widget.play();
            });
          });

          widget.play();
        }
        currentWidget = event.currentTarget.childNodes[1];

      });
      list.addEventListener("mouseleave", function(event) {

        console.log('pause soundcloud ');
        if (widget) {
          widget.pause();
        }
      });
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<div class="clickme" style="width: fit-content;height: fit-content;">
  <iframe width="300" height="200" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/crythemindlesselectron/legend-of-zelda-ocarina-of-time-thunderstruck-oc-remix&show_artwork=true" frameborder="0">                                   
    </iframe>
</div>
<div class="clickme" style="width: fit-content;height: fit-content;">
  <iframe width="300" height="200" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/daniel-feldkamp-2/sets/oc-remix-zelda&show_artwork=true" frameborder="0">                                   
    </iframe>
</div>