我正在尝试向自动完成数据添加网址链接

时间:2019-03-03 17:53:31

标签: javascript autocomplete soundcloud

我不熟悉特定部分的编码和挣扎。将不胜感激。谢谢!

我试图像这样添加网址:

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/349298285&color=%23f26016&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>

到以下JavaScript代码部分。

// Auto Complete
const ac = document.querySelector('.autocomplete');
M.Autocomplete.init(ac, {
    data: {
      "Nik:11": null,
      "Tell Me": null, 
      "Hypervent": null,
      "Selfish Heart": null,
      "Dont Make Me wait": null,
      "What You Deserve": null,
      "You Did Something": null,
      "Quench My First": null,
      "Rockstar": null,
      "Dreamer": null,
      "Ultraviolet": null,
      "Win your Love": null,
    }
  });

实际上,我希望用户能够在搜索中使用自动完成功能,然后当他们单击它时,他们会听起来像云一样并播放那首歌曲。

有人知道我该怎么做吗?这也是搜索栏的代码吗?

code

您能解释一下如何将搜索栏链接到曲目,以及如何在网站上添加嵌入播放器。

谢谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您需要创建MAP或函数来获取soundcloud上每首歌曲的ID。 然后,在初始化Autocomplete元素时,需要传递用户选择选项时执行的 onAutoComplete 函数。

我在下面添加一个示例(曲目ID是随机的),如您所见,changePlayerSong选项将具有从地图中选择的歌曲ID的URL设置为iframe元素(在这种情况下,我将id =“ player”放到了iframe)。

// Map of songs that relates the String of the autocomplete with the soundcloud id
const SONG_MAP = {
    "Nik:11": 349298284,
    "Tell Me": 349298283,
    Hypervent: 349298282,
    "Selfish Heart": 349298281,
    "Dont Make Me wait": 349298284,
    "What You Deserve": 349298284,
    "You Did Something": 349298284,
    "Quench My First": 349298284,
    Rockstar: 349298284,
    Dreamer: 349298284,
    Ultraviolet: 349298284,
    "Win your Love": 349298284
};

// Changes the iframe with id="player" url to display the new soundcloud song
function changePlayerSong(songId) {
  return `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${songId}&color=%23f26016&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`;
};

// Configure the Autocomplete onload
document.addEventListener("DOMContentLoaded", function() {
  const ac = document.querySelector(".autocomplete");
  M.Autocomplete.init(ac, {
    data: {
      "Nik:11": null,
      "Tell Me": null,
      Hypervent: null,
      "Selfish Heart": null,
      "Dont Make Me wait": null,
      "What You Deserve": null,
      "You Did Something": null,
      "Quench My First": null,
      Rockstar: null,
      Dreamer: null,
      Ultraviolet: null,
      "Win your Love": null
    },
    // Autocomplete function callback that is triggered when the user selects some value
    onAutocomplete: function(value) {
      document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);
    }
  });
});

取消功能:

onAutocomplete: function(value) {
    document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);
}

此功能获得用户选择的自动完成结果,例如,如果用户在键入时选择“ Selfish Heart”选项,则值为“ Selfish Heart”。 然后执行SONG_MAP [value]将返回开始时声明的songId,例如SONG_MAP [“ Selfish Heart”]将返回349298281。在这里,我们已经将songId作为参数传递给播放器。为此,我们使用changePlayerSong函数。

function changePlayerSong(songId) {
  return `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${songId}&color=%23f26016&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`;
};

如您所见,此函数接收一个名为songId的参数,该参数将包含我们之前从地图中检索到的歌曲的编号。 此函数将返回歌曲的SoundCloud URL,请注意,$ {songId}语法将用变量的内容替换$ {songId},在本例中为作为参数接收的数字。

再次使用onAutoComplete函数,我们已经获得了带有播放器URL的changePlayerSong函数的结果。现在,我们使用以下说明替换显示播放器的iframe的源

document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);

此句子将在我们的HTML中查找具有id =“ player”的元素,并将使用所选歌曲的新URL更改src(源)属性

如果需要帮助或更多信息,请联系我!