я пытаюсь добавить ссылку на URL для автозаполнения данных - PullRequest
Новая
       15

я пытаюсь добавить ссылку на URL для автозаполнения данных

0 голосов
/ 03 марта 2019

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

Я пытаюсь добавить 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 Ответ

0 голосов
/ 03 марта 2019

Вам необходимо создать MAP или функцию для получения идентификатора каждой песни в soundcloud.Затем, при инициализации элемента Autocomplete, вам нужно передать функцию 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%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]);
}

Эта функция получает результат автозаполнения, который выбирает пользователь, например, если пользователь выбирает опцию «Эгоистичное сердце» при вводе, значением будет «Эгоистичное сердце».Затем выполнение SONG_MAP [value] вернет нам идентификатор песни, объявленный в начале, например, 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, который будет содержать номер песни, которую мы ранее извлекли из карты.Эта функция будет возвращать URL-адрес SoundCloud песни, обратите внимание, что синтаксис $ {songId} заменит $ {songId} содержимым переменной, в этом случае число, полученное в качестве параметра.

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

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

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

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

...