Блог

Я новичок в кодировании и испытываю трудности с определенным разделом. был бы признателен за некоторую помощь. Спасибо!

Я пытаюсь добавить URL-адрес следующим образом:

 <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/349298285amp;color=#f26016amp;auto_play=falseamp;hide_related=falseamp;show_comments=trueamp;show_user=trueamp;show_reposts=falseamp;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,
    }
  });
  

По сути, я хочу, чтобы пользователь мог использовать автозаполнение в поиске, а затем, когда он нажимает на него, он переходит в sound cloud и воспроизводит эту песню.

Кто-нибудь знает, как я могу это сделать, также вот код для строки поиска?

код

Не могли бы вы объяснить, как я могу связать строку поиска с дорожкой, а также добавить встроенный проигрыватель на веб-сайт.

Заранее благодарю вас за помощь.

Вам нужно создать карту или функцию, чтобы получить идентификатор каждой песни на soundcloud. Затем, при инициализации элемента автозаполнения, вам нужно передать функцию onAutoComplete, выполняемую, когда пользователь выбирает опцию.

Я добавляю пример ниже (идентификаторы треков являются случайными), как вы можете видеть, опция changePlayerSong устанавливает 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://api.soundcloud.com/tracks/${songId}amp;color=#f26016amp;auto_play=falseamp;hide_related=falseamp;show_comments=trueamp;show_user=trueamp;show_reposts=falseamp;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]);
}
  

Эта функция получает результат автозаполнения, который выбирает пользователь, например, если пользователь выбирает опцию «Эгоистичное сердце» при вводе, значением будет «Эгоистичное сердце».
Затем выполнение SONG_MAP[значение] вернет нам SongID, объявленный в начале, например SONG_MAP[«Эгоистичное сердце»] вернет 349298281. Здесь мы уже получили SongID для передачи в качестве параметра проигрывателю. Для этого мы используем функцию changePlayerSong.

 function changePlayerSong(songId) {
  return `https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/${songId}amp;color=#f26016amp;auto_play=falseamp;hide_related=falseamp;show_comments=trueamp;show_user=trueamp;show_reposts=falseamp;show_teaser=true`;
};
  

Как вы можете видеть, эта функция получает параметр с именем SongID, который будет содержать номер песни, которую мы ранее извлекли из карты.
Эта функция вернет URL-адрес песни SoundCloud, обратите внимание, что синтаксис ${SongID} заменит $ {SongID} содержимым переменной, в данном случае числом, полученным в качестве параметра.

Опять же, в нашей функции onAutoComplete у нас уже есть результат функции changePlayerSong с URL-адресом проигрывателя. Теперь мы заменяем источник iframe, который отображает проигрыватель, следующей инструкцией

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

Это предложение будет искать элемент с id =»player» в нашем HTML и изменит свойство src (source) на новый URL выбранной песни

Свяжитесь со мной, если вам нужна помощь или дополнительная информация!