我正在尝试添加指向自动完成数据的url链接。
我刚开始编写代码，并且正在为某个特定的部分而苦苦挣扎。会很感谢你的帮助。谢谢!
我尝试像这样添加URL：
<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,
}
});实际上，我希望用户能够在搜索中使用自动补全，然后当他们点击时，它会将他们带到云端并播放这首歌。
有人知道我怎么做吗?这是搜索栏的代码。
你能解释一下我如何将搜索栏链接到曲目上，并在网站上添加嵌入式播放器吗？
提前感谢您的帮助。
回答 1
Stack Overflow用户
发布于 2019-03-04 03:12:48
您需要创建地图或函数来获取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_MAPvalue将返回开头声明的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地址，请注意，${songId}语法将用变量的内容替换${songId}，在本例中是作为参数接收的数字。
同样在我们的onAutoComplete函数上，我们已经有了changePlayerSong函数的结果和播放器的URL。现在，我们将使用以下指令替换显示播放器的iframe的源代码
document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);这句话将查找HTML中具有id="player“的元素，并将使用所选歌曲的新URL更改src (源)属性
如果您需要帮助或更多信息，请联系我！
https://stackoverflow.com/questions/54971898
复制相似问题