Javascript music player project

JavaScript
1

I tried loading this on my browser and i keep getting the response: “Failed to load because no supported source was found.” What could be wrong please. I’m stuck. Thanks in aniticipation

const playlistSongs = document.getElementById("playlist-songs");
const play = document.getElementById("play");
const pause = document.getElementById("pause");
const previousButton = document.getElementById("previous");
const shuffleButton = document.getElementById("shuffle");









const allSongs = [{
    id: 0,
    title: "Scratching the surface",
    artist: "Quincy Larson",
    duration: "4:25",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3"
    //src: "https://s3amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3"
},
{
    id: 1,
    title: "Can't Stay Down",
    artist: "Quincy Larson",
    duration: "4:15",
    src: "https://s3amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3"
},{
    id: 2,
    title: "Still Learning",
    artist: "Quincy Larson",
    duration: "3:51",
    src: "https://s3amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3" 
},
{
    id: 3,
    title: "Cruising for a Musing",
    artist: "Quincy Larson",
    duration: "3:34",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
  },
  {
    id: 4,
    title: "Never Not Favored",
    artist: "Quincy Larson",
    duration: "3:35",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
  },
  {
    id: 5,
    title: "From the Ground Up",
    artist: "Quincy Larson",
    duration: "3:12",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
  },
  {
    id: 6,
    title: "Walking on Air",
    artist: "Quincy Larson",
    duration: "3:25",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
  },
  {
    id: 7,
    title: "Can't Stop Me. Can't Even Slow Me Down.",
    artist: "Quincy Larson",
    duration: "3:52",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
  },
  {
    id: 8,
    title: "The Surest Way Out is Through",
    artist: "Quincy Larson",
    duration: "3:10",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
  },
  {
    id: 9,
    title: "Chasing That Feeling",
    artist: "Quincy Larson",
    duration: "2:43",
    src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
  }];













  const audio = new Audio();













let userData = {
    songs: [...allSongs],
    currentSong: null,
    songCurrentTime: 0
};













 const renderSongs = (array) => {
    const songsHTML = array.map(song => {
        return `<li id="song-${song.id}" class="playlist-song">
                <button class="playlist-song-info">
                <span class="playlist-song-title">${song.title}</span>
                <span class="playlist-song-artist">${song.artist}</span>
                <span class="playlist-song-dduration">${song.duration}</span>
                </button>
                <button 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;
};

renderSongs(userData?.songs);











const playSong = id => {
  console.log("played");
    const song = userData?.songs.find(song => {
        return  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;
        play.classList.add("playing");
        audio.play();

};














play.addEventListener("click", () => {if (userData?.currentSong === null) {
    playSong(userData?.songs[0].id);} else {playSong(userData?.currentSong.id)}});




    //const pauseSong = () => {

    //}
2

This is the javascript music player project step 32

3

Please post a link to the Step. Thanks

4

Learn Basic String and Array Methods by Building a Music Player: Step 33 | freeCodeCamp.org

thats the link. Though the step isnt my challenge. I am writing my codes on VS code and i think i must made a mistake somewhere which i can’t figure out.

5

Hi @Embraz

The code you supplied commented out the variable.

Happy coding

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.