Learn basic string and array methods by building a music player final step

JavaScript
1

Hi, so I wanted to do a little tweak by creating a new file for the allSongs array and exporting it from there. But whenever I click on the songs displayed, the music doesn’t start playing. It only starts playing when I click the playButton button. So overall the buttons seem to work, but not when I click on the songs directly.
What I have tried so far:

  1. create a new file for the allSongs array => allSongs.js
  2. export the allSongs array from there
  3. import allSongs array in the script.js file
  4. in index.html
    <script defer type="module" src="./script.js"></script>
    <script defer type="module" src="./allSongs.js"></script>

if I remove the defer and the type from the script and place the allSongs array in the script.js without exporting it, it works. It seems to be a problem with the type module.
Any help is appreciated.

2

UPDATE: Found where the error is coming from

ReferenceError: Can't find variable: playSong.

const renderSongs = (array) => {
    const songsHTML = array.map((song) => {
        return `<li id="song-${song.id}" class="playlist-song">
        <button class="playlist-song-info" onclick="playSong(${song.id})">
            <span class="playlist-song-title">${song.title}</span>
            <span class="playlist-song-artist">${song.artist}</span>
            <span class="playlist-song-duration">${song.duration}</span>
        
        </button>
        
        <button onclick="deleteSong(${song.id})" class="playlist-song-delete" aria-label="Delete ${song.title}">
            <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
        </button>
        </li>
        `
    }).join("");
    playlistSongs.innerHTML = songsHTML;
}

The problem seems to be caused by onclick within string interpolation.

3

delete song, does it take a string? if so you are missing the quotes around the argument

4

Hi, i tried wrapping both the argument of the deleteSong and playSong functions within quotes and i still got the same undefined problem.
I find out that the html event attributes don’t work using js6 modules, so the function needed to be brought from global scope to module scope.

window.playSong = playSong;
window.deleteSong = deleteSong;

this worked but now unfortunatelly i am getting a different error stating that

Uncaught TypeError: can't access property "src", song is undefined

I 'm guessting it is coming from the playSong function

const playSong = (id) => {
    const song = userData?.songs.find((song) => song.id === id);
    audio.src = song.src;
    audio.title = song.title;

    if(userData?.currentSong === null || userData?.currentSong.id !== song.id) {
        audio.currentTime = 0;
    } else {
        audio.currentTime = userData?.songCurrentTime;
    }
    userData.currentSong = song;
    playButton.classList.add("playing");

    highlightCurrentSong();
    setPlayerDisplay();
    setPlayButtonAccessibleText();
    audio.play();
};
5

In the final step of Building Music Player, for me it’s showing this instructions:
With everything set in place, call the pauseSong(), setPlayerDisplay(), highlightCurrentSong(), and setPlayButtonAccessibleText() functions to correctly update the player.
@humbleton

6

Yes i know, i just wanted to place the allSongs array into a new file instead of having it all in the same script.js file for the code structure. Sorry for the title

7

Solution Found
All I had to do was remove the quotation marks inside the button’s onclick event
so instead of onclick="playSong( '${song.id}' )" 

onclick="playSong( ${song.id} )"

and add window.playSong and window.deleteSong by moving functions from the global scope to the module scope.