imkaranks / spotify-clone-html-css-js

Spotify clone made with html, css and js.

Spotify Clone

 

Spotify clone made with

 

Table Of Content

• Built Using
• Getting Started

Built Using

• HTML5 - Markup Language
• CSS3 - Cascading Style Sheet
• Javascript - Scripting Language

Getting Started

There is nothing you need to install as it is made using only HTML, CSS and JS. But there are certain things you need to do, so that app would run without any problem.

1. First you need to make a /songs folder and add desired songs. I've excluded it to cut down unnecessary upload size.

2. Finally you need to update data.json file according to the songs added. There will be content present in this file but it's basically work as placeholder, you'll need to make changes in order to make some functionality work. The basic schema looks like this:

{
  "focus": [ // section title
    { // each and every playlist for this section goes here
      "id": 1,
      "name": "peaceful piano",
      "desc": "Lorem ipsum dolor sit amet consectetur.",
      "img": "./assets/thumbnail (1).jpg",
      "songs": [
        {
          "id": 1,
          "title": "Au5 last heroes lush",
          "artist": "NCS",
          "duration": "5:00",
          "src": "./songs/Au5-Last-Heroes-Lush.mp3"
        },
        {
          "id": 2,
          "title": "dirty palm oblivion",
          "artist": "NCS",
          "duration": "4:50",
          "src": "./songs/Dirty-Palm-Oblivion.mp3"
        },
        {
          "id": 3,
          "title": "DJ-assass1n frag out",
          "artist": "NCS",
          "duration": "4:29",
          "src": "./songs/DJ-ASSASS1N-Frag-Out.mp3"
        },
        {
          "id": 4,
          "title": "elektromia vitality",
          "artist": "NCS",
          "duration": "4:11",
          "src": "./songs/Elektronomia-Vitality.mp3"
        },
        {
          "id": 5,
          "title": "inushuk the long road home",
          "artist": "NCS",
          "duration": "3:11",
          "src": "./songs/Au5-Last-Heroes-Lush.mp3"
        }
      ]
    },
  ],
}