Soundcloud API：播放正确的声音

Question

上下文：这是一个 Soundcloud API javascript 和 iframe，当您将鼠标悬停在链接上时播放 soundcloud 链接的声音。链接已输入到表格中，以便您知道。

问题：问题在于，当我将鼠标悬停在输入到表格中的链接上时，即说我在表格中放置了多个链接（每个链接都连接到不同的声音），但是当我将鼠标悬停在每个链接上时，它们只会播放声音表中的第一个链接；表中的其他链接不播放相应的声音。有人可以帮我修改下面的代码来解决这个问题吗？下面提供与原代码集成的修改代码。

HTML（Iframe 的 src 被定制为播放该特定链接）：

<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

问题是您通过以下几行将 soundcloud 播放器硬编码到第一个 id 为 sc-widget 的 iframe：

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

为了能够在悬停时播放不同的曲目，小部件需要使用正确的 iframe 填充。

所以这些是所需的步骤。如果用户将鼠标悬停在其中一个容器 div 上

• 检查用户是否已将鼠标悬停在此特定项目上。
• 如果他这样做了，请恢复声音。
• 如果他没有从小部件中取消绑定任何事件（如果有），请使用 iframe 初始化小部件，绑定所需的事件并从头开始播放。
• 如果用户用鼠标离开容器 div，如果有东西在播放，则停止播放。

这是一个工作示例：

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>