我不熟悉特定部分的编码和挣扎。将不胜感激。谢谢!
我试图像这样添加网址:
<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,
}
});
实际上,我希望用户能够在搜索中使用自动完成功能,然后当他们单击它时,他们会听起来像云一样并播放那首歌曲。
有人知道我该怎么做吗?这也是搜索栏的代码吗?
您能解释一下如何将搜索栏链接到曲目,以及如何在网站上添加嵌入播放器。
谢谢您的帮助。
答案 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(源)属性
如果需要帮助或更多信息,请联系我!