Search code examples
javascriptautocompletesoundcloud

i am trying to add a url link to an autocomplete data

I am new to coding and struggling with a particular section. would appreciate some help. thanks!

I am trying to add the URL like so: 

<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>

to the following section of javascript code. 

// 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,
    }
  });

In effect, I want the user to be able to use the auto complete in the search and then when they click on it takes them to sound cloud and play that song.

Does anyone know how I can do this also here is the code for the search bar?

code

Can you explain how I can link up the search bar to the track and also add the embed player on the website.

Thank you for your help in advance.

Solution

  • You need to create a MAP or a function to get the ID of each song on soundcloud. Then, when initializing the Autocomplete element, you need to pass the onAutoComplete function executed when the user selects an option.

    I add an example below (the tracks id are random), as you can see the changePlayerSong option set the url with song id selected from the map to the iframe element (in this case I put id="player" to the 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]);
    }
  });
});

    Breaking down the functions:

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

    This function gets the autocomplete result that the user selects, for example if the user selects the "Selfish Heart" option when typing, value will be "Selfish Heart". Then doing SONG_MAP[value] will return us the songId declared at the start, for example SONG_MAP["Selfish Heart"] will return 349298281. Here, we already got the songId to pass as parameter to the player. To make that we use the changePlayerSong function.

    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`;
};

    As you can see, this function receives a parameter called songId that will contain the number of the song that we retrieved before from the map. This function will return the SoundCloud URL of the song, note that the ${songId} syntax will replace ${songId} with the content of the variable, in this case the number received as parameter.

    Again on our onAutoComplete function, we already have the result of the changePlayerSong function with the URL of the player. Now we are replacing the source of the iframe that is displaying the player with the following instruction

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

    This sentence will look for the element that have id="player" in our HTML and will change the src (source) property with the new URL of the selected song

    Reach me if you need help or more information!