How to get back src after passing to howler function?

29 views Asked by At

I have a slider that has a range corresponding to values of an element of my array. For each step along the range, I would like to have howler play the song that corresponds to that value. The .mp3 for each song is accessed via a url that is in the array. I have verified that the urls work correctly. The array is called demosongs and it looks like this:

0: {danceability: 0.01, preview_url: 'somewebsiteaddress1.com'}
1: {danceability: 0.21, preview_url: 'somewebsiteaddress2.com'}
2: {danceability: 0.47, preview_url: 'somewebsiteaddress3.com'}
3: {danceability: 0.62, preview_url: 'somewebsiteaddress4.com'}
4: {danceability: 0.89, preview_url: 'somewebsiteaddress5.com'}

So, for example, if my slider is in the 3rd position, I want to play the song at the link: 'somewebsiteaddress3.com' and if I switch the slider to the 5th position, I want 'somewebsiteaddress3.com' to stop playing and 'somewebsiteaddress5.com' to start playing instead.

I have set up a function that gets the value of the slider and uses that to get the url to the sound file that should be played. I then pass that url to the howler function that should be storing all of the information that it needs into a variable called sound. When I try to pass the variable sound back to the previous function, the sound variable has lost the url. The code looks like this:

let sound = getsongtoplay();

function getval(){
  thesong = demosongs[(slider.value)-1];
  soundurl = thesong["preview_url"];
  getsongtoplay(soundurl);
  sound.play();


function getsongtoplay(soundurl){
  var sound = new Howl({
    src: [soundurl],
    format: ['mp3'],
    autoplay: false,
    loop: false,
    volume: 0.5,
  });
  console.log(sound);
  return sound;
};

Any help would be greatly appreciated. I'm new to howler and haven't used javascript in quite awhile but would like to become proficient in both howler and javascript, in general.

1

There are 1 answers

0
Jen On

Okay, so I think this means that I need to take a break. I just forgot to ask for sound when I called the getsoundtoplay function. So, it should look like this:


function getval(){
  thesong = demosongs[(slider.value)-1];
  soundurl = thesong["preview_url"];
  sound = getsongtoplay(soundurl);
  sound.play();


function getsongtoplay(soundurl){
  var sound = new Howl({
    src: [soundurl],
    format: ['mp3'],
    autoplay: false,
    loop: false,
    volume: 0.5,
  });
  console.log(sound);
  return sound;
};

If no one minds, I'll leave this here for other howler/js newbies.