Code pt1

Below is my the first half of my program code, it's a upload part where user can upload mp3 along with a photo, song title, and the artist name.

<html>
<head>
  <title>Song Upload</title>
  <link rel="stylesheet" href="uploadstyles.css">
</head>
<body>
  <h1>Upload Your Own Song (mp3 only)</h1>

  <form id="uploadForm">
    <label for="songName">Song Name:</label>
    <input type="text" id="songName" required><br><br>
    <label for="artistName">Artist Name:</label>
    <input type="text" id="artistName" required><br><br>
    <label for="mp3File">Choose an MP3 file:</label>
    <input type="file" id="mp3File" accept=".mp3" required><br><br>
    <label for="coverFile">Choose a cover image:</label>
    <input type="file" id="coverFile" accept="image/*" required><br><br>
    <input type="submit" value="Upload">
  </form>

  <script>
    document.getElementById("uploadForm").addEventListener("submit", function(event) {
      event.preventDefault();
      var songName = document.getElementById("songName").value;
      var artistName = document.getElementById("artistName").value;
      var mp3File = document.getElementById("mp3File").files[0];
      var coverFile = document.getElementById("coverFile").files[0];

      var maxSize = 2 * 1024 * 1024;

      if (mp3File.size > maxSize || coverFile.size > maxSize) {
        alert("File too big, choose a smaller file under 2mb");
        return;
      }
      var reader = new FileReader();
      reader.onload = function(event) {
        var mp3Data = event.target.result.split(",")[1];

        var coverReader = new FileReader();
        coverReader.onload = function(event) {
          var coverData = event.target.result.split(",")[1];

          var songData = {
            songName: songName,
            artistName: artistName,
            mp3Data: mp3Data,
            coverData: coverData
          };

          var uploadedSongs = JSON.parse(localStorage.getItem("uploadedSongs")) || [];
          uploadedSongs.push(songData);
          localStorage.setItem("uploadedSongs", JSON.stringify(uploadedSongs));

          alert("Song successfully uploaded!");
          document.getElementById("uploadForm").reset();
        };
        coverReader.readAsDataURL(coverFile);
      };
      reader.readAsDataURL(mp3File);
    });
  </script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>$("#header").load("/Antony-s-fast-page/header.html");</script>
</html>

Explain for code pt1

  1. First I import my css by using link and href.
  2. Then I create a form called uploadForm where I have some text inputs and file inputs. The form include two text input, an song name and a artist name. Two file input, a mp3 file input and a image file input for the cover image.
  3. The next is the javascript part, I first used getElementById to get the html form. I also use event listener to run the function once the submit is clicked.
  4. Then I use var to define the variables, songname, artistname, mp3, etc.
  5. Here I made the maximum accepted file size 2mb because the capacity of a localstorage is only 5mb. This is one of the major disadvantage of localstorage, with this capacity, I'm only able to store approx 4 songs with each song only as a clip of 10 to 20 seconds. A alert will pop up once the any of the file size is greater than 2 mb.
  6. Then I use file reader to read the files and then I convert all the data into one variable.
  7. Then I created a localstorage called uploadedsongs and use it to store the file in JSON format.
  8. Then I use setItem to push the data into the uploadedsong container.
  9. Once the song is uploaded, an alert will pop up says song successfully uploaded. The form will be cleared once the data are commited.

Code pt2 

<html>
<head>
  <title>Uploaded Songs</title>
  <link rel="stylesheet" href="uploadstyles.css">
</head>
<body>
  <h1>Songs List</h1>

  <div id="songList"></div>

  <script>
    var songs = JSON.parse(localStorage.getItem("uploadedSongs")) || [];
    songs.sort(function(a, b) {
      var songA = a.songName.toLowerCase();
      var songB = b.songName.toLowerCase();
      if (songA < songB) {
        return -1;
      }
      if (songA > songB) {
        return 1;
      }
      return 0;
    });

    var songList = document.getElementById("songList");
    for (var i = 0; i < songs.length; i++) {
      var song = songs[i];

      var container = document.createElement("div");
      container.className = "song-container";

      var songName = document.createElement("div");
      songName.className = "song-name";
      songName.textContent = song.songName + " by " + song.artistName;

      var coverImage = document.createElement("img");
      coverImage.className = "cover-image";
      coverImage.src = "data:image/*;base64," + song.coverData;

      var audio = document.createElement("audio");
      audio.controls = true;
      audio.src = "data:audio/mp3;base64," + song.mp3Data;

      var deleteButton = document.createElement("button");
      deleteButton.textContent = "Delete";
      deleteButton.className = "delete-button";
      deleteButton.addEventListener("click", function(event) {
        var index = Array.from(songList.children).indexOf(event.target.parentNode);
        songs.splice(index, 1);
        localStorage.setItem("uploadedSongs", JSON.stringify(songs));
        songList.removeChild(event.target.parentNode);
      });

      container.appendChild(songName);
      container.appendChild(coverImage);
      container.appendChild(deleteButton);
      container.appendChild(audio);

      songList.appendChild(container);
    }
  </script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>$("#header").load("/Antony-s-fast-page/header.html");</script>
</html>

Explain for code pt2

  1. First, I convert the song name from JSON format back to text by parse.
  2. I also did sorting since it was required in a week's procedure. I did it with the sort function by comparing the letter.
  3. Then I use getElement to get the songList so I can append item into the song list container. The for loop is used to retrive the songs.
  4. The following defined variables were retrived data. Here, I use base64 to encode the files to make sure the data integrity.
  5. Last, I create a delete button where user can delete the JSON object of the song in the localstorage container.
  6. At the very last, I append all the items into the container.