Question

我正在制作一个音频播放器，我希望人们能够用空格键播放和暂停音乐。我有它的工作。不幸的是，该脚本仅适用于第一个播放器（当有人点击一首歌时，播放器部分被加载到屏幕顶部）。所以一旦第一部分消失了。它的播放和暂停功能不再起作用。有什么建议。

private void PrintProperties(object obj, int indent)
    {
        if (obj == null) return;
        string indentString = new string(' ', indent);
        Type objType = obj.GetType();
        PropertyInfo[] properties = objType.GetProperties();
        foreach (PropertyInfo property in properties)
        {
            object propValue = property.GetValue(obj, null);

            var elems = propValue as IList;
            if ((elems != null) && !(elems is string[]) )
            {
                foreach (var item in elems)
                {
                    PrintProperties(item, indent + 3);
                }
            }
            else
            {
                // This will not cut-off System.Collections because of the first check
                if (property.PropertyType.Assembly == objType.Assembly)
                {
                    LogToWindow(String.Format("{0}{1}:", indentString, property.Name));
                    PrintProperties(propValue, indent + 2);
                }
                else
                {
                    if (propValue is string[])
                    {
                        var str = new StringBuilder();
                        foreach (string item in (string[])propValue)
                        {
                            str.AppendFormat("{0}; ", item);
                        }
                        propValue = str.ToString();
                        str.Clear();
                    }
                    LogToWindow(String.Format("{0}{1}: {2}", indentString, property.Name, propValue));
                }
            }
        }
    }

完整代码

$(document).keydown(function(event) {
  if (event.keyCode == 32) {
    if (!mytrack.paused && !mytrack.ended) {
      mytrack.pause();
      play.innerHTML = "<i class='fa fa-play'></i>";
      window.clearInterval(updateTime);
    } else {
      mytrack.play();
      play.innerHTML = "<i class='fa fa-pause'></i>";
      updateTime = setInterval(update, 500);
    }
    return false;
  }
});

Answer 1

您的mytrack一开始就设置了一次。

var mytrack = document.getElementById("sound");

在使用你的应用程序的过程中如果设置了“新玩家”以使mytrack不再在DOM中，那么你对mytrack的引用现在指向一个音频元素没用了。

您需要不替换mytrack，而是动态更改src，以便mytrack保留在DOM中，或根据需要更新对音频元素的引用。

这可以像更换mytrack = document.getElementById("whatever-the-id-of-the-new-audio-element-is");之后更新一样简单，也可以在尝试与之交互之前动态找到它。

简而言之，您的闭包会保留对mytrack的引用，并始终尝试使用它。这是你的工作，以确保它仍然有用，或替换它。

编辑刚查看了所有扩展代码，发现你正在将监听器附加到myTrack。从DOM中删除addEventListner时，您需要将每个removeEventListener与对应的myTrack配对，以避免内存泄漏。

您可能希望将所有“开始观察播放器时执行的代码”移动到某个功能中，以便您可以将其用于您设置的每个音频播放器。由于大多数HTML5媒体事件都没有泡沫，因此事件代表团在更高级别的事件中进行侦听并不是您真正想要的事情。

一旦您将代码隔离，您还需要一个用于响应删除音频元素的集合。

请记住，addEventListener和removeEventListener期望在相同的元素上调用相同的事件类型，在相同的事件阶段使用相同的处理程序。这通常会使不熟悉该过程的人绊倒并将其发送到直接在元素上设置onended。但它并不复杂。关于removeEventListener“无法正常工作”这里有很多问题可以解释。

按键暂停和播放音频

1 个答案: