Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
4.7 (1,416 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,511 students enrolled

Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

Learn JavaScript, PHP and MySQL by building the ultimate music streaming website from scratch! The complete guide!
4.7 (1,416 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,509 students enrolled
Created by Reece Kenney
Last updated 7/2019
English
English [Auto], Polish [Auto], 1 more
  • Romanian [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 15 hours on-demand video
  • 131 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build your own music streaming service like Spotify
  • Master important areas of development in JavaScript, PHP, HTML and MySQL
  • Discover important techniques that are essential for any aspiring software engineers
Course content
Expand all 169 lectures 14:58:10
+ Setting up the sign up/ log in forms
3 lectures 22:54

So let's get started! Unfortunately the first lecture is the least exciting, but it needs to be done. We're setting up the local server which will allow you to test your sites locally! Don't worry, it's super easy, we just need to download one thing :)

Preview 08:33

So in this lecture we will be creating the html for our login form! As the name suggests, this is what the user will use to log into the website. 

Preview 09:28

This lecture will be fairly similar to the previous one, but we are creating our registration form instead. This is what the user will use to sign up to our website.

Creating the register form
04:53
+ Handling the user's submitted data
12 lectures 01:13:06

Now we'll learn how to use PHP to perform an action when the button is pressed! 

Intro to PHP - Handling form submission
04:10

Once we take the user's information that they entered into the form, we want to clean it up a little before we send it to the database. Let's do it!

Form sanitation - Cleaning the input
10:56

So our register page is beginning to get a little long. What we can do, is split the code up into separate files which makes it easier to work with! 

Separating our code
04:39

So we're going to want to validate the user's input when they submit the form. This is different than sanitation that we did a few lectures back. This is to do with making sure that the input is the right number of characters, that the emails match, that the passwords are valid etc. In this video we are setting these functions up so that we will be ready to start coding them :)

Preparing our validation functions
03:39

So now we're going to start working more OOP (Object oriented programming). We're creating the class which will be used to validate the user's account credentials and eventually sign the user up/log them in. 


Creating the Account class
07:19

So we need to do certain checks to the data that the user enters. In this video we will write the function that checks if the username is suitable.

Validating the username
06:51

So we've checked the username, now it's time to check the first name, last name and email addresses to make sure they are valid.

Validating the name and emails
04:44

So the last validation function is for the passwords! :) 

Validating the passwords
03:57

So we've done all our validation checks now (with the exception of the things we're coming back to do later) so now we can check if their sign up was successful or not.

Checking if the sign up was successful
03:07

So if any of the data that the user entered is invalid, we need to tell them. For example, if their emails do not match, we need to let them know. In this video we will be outputting an error message for each failed validation check. 

Outputting error messages
08:58

So at the moment we need to make sure our error message strings that we put into the array match exactly with the ones we check for when outputting the errors. In this video we will create a class which allows us to only store these strings in one location. 

Creating our Constants class
08:58

It would be nice if the when the user entered invalid data into our form and error messages are shown, all of their details that were just entered would be remembered. This would prevent them from having to re-enter them again. Let's do that now! 

Remembering form values
05:48
+ Completing the sign up / log in process
8 lectures 43:26

So in order to save our users account details, we need to create a table in which to save to. So let's create the users table :)

Creating the users table
04:58

So in order to perform queries on our database using php code, we need to connect to it. So in this video, we will be handling this connection.

Connecting to our database from PHP
04:46

So it's time to write our first MySql query! We're going to write the function that actually inserts the data into the users table. 

Inserting user details
09:10

So we've handled data sanitation, validation and finally insertion. Now let's give it a try! :)

Testing out the sign up process!
03:32

There's a good chance that if it's your first time working with MySQL, that your query isn't working. If that's the case, watch this video where I'll show you some tips for debugging your queries. 

Query not working? Watch this video
04:35

If you remember, there are two things that we haven't done yet in terms of validation. We still need to check if the username the user is trying to sign up with has been taken already and also check if the email has already been used before. 

Last remaining validation checks
04:44

So a while ago, we created our login_handler,php file. We haven't done anything with that file yet but now it's time to start using it. Compared to the register process, this is really really simple. 

Login handler
06:07

When we log in, we need a way to remember that the user is in fact logged in. We also need the user to be redirected to the register page if they try to access any of our site without logging in. We can do this using sessions. 

Sessions
05:34
+ Styling the registration page
14 lectures 01:10:56

We're finally ready to add some CSS style to our site! Let's start by adding a background image to our page.

Adding a background image
06:54

So we're going to have a container div around out login container. In this video we will add this container and also apply CSS to it. 

Styling the login container
08:33

Now let's move on to styling the input boxes that the user will type into.

Styling our text boxes
06:54

In this video I will show you a way in which you can change the color of the textbox placeholders.

Input placeholder color
03:20

Now we will apply CSS style to the buttons that the user uses to submit the forms.

Styling the submit buttons
03:56

Now what we are going to do is add the text that will be used to switch between the sign up and login forms. 

Buttons to switch between forms
03:24

Last video we added the text which will show and hide the forms when they are clicked and now we will actually add some functionality to them. This will be our first use of JavaScript!

Showing and hiding the forms on press
07:55

Now we need to make it automatically show and hide the forms depending on which form was submitted.

Showing only the relevant form when data is submitted
06:55

One little usability improvement is to change the mouse to a pointer when they hover over the text so that they know it is a clickable element. 

Show/hide button - mouse pointer
01:15

It's finally time to add some content to the right of the forms. So we'll add some welcome text that just gives a little information about what our site is used for.

Right section content
04:30

Last video we added the content itself, now we are going to style it. 

Applying style to the right section content
05:09

I'm going to show you a really cool app which gives your access to thousands of icons for free! 

56,800+ icons FOR FREE - Icons8
08:16

We're just going to add a very small amount of css to our error messages now so that they match the rest of the style on the page.

Styling the error messages
02:46

So I just realised that I forgot to add the code which makes the form remember the username when a user has an unsuccessful login attempt. We've already done all the work for this, we just need to add the function call to our textbox. Simple!

Remembering the username after failed log in attempt
01:09
+ Creating the now playing bar
12 lectures 59:44

I'll just give you a very brief overview of the index page and the three main sections that make up the page.

Quick overview of the index page
01:17

In this video we create as style the container for our now playing bar.

Now playing bar container
05:18

So now we're going to create the actual now playing bar element itself. You won't notice a whole lot of difference visually after this video, but the now playing bar container will be taking the height of the actual now playing bar element. 

Creating the now playing bar element
03:52

In this video I'll show you how we're going to split our now playing bar into three sections.

Left, center and middle sections of the bar
04:58

In this video, you'll get access to all of the icons that I use throughout my site. You can use your own icons or if you want to use the same ones as me, you can get them from the zip file attached to this course.

All the icons for our site
02:30

So now that we have our icons, let's create the buttons for our music player!

Adding our player buttons
10:31

So our play/pause buttons are going to be slightly larger than the other buttons on our now playing bar. Let's do that now!

Making the play and pause buttons larger
02:32

Let's add the elements that will make up the container for the progress bar of the currently playing song. 

Progress bar parent elements
04:54

Now, it's finally time to create the progress bar itself!

The progress bar
05:57

Let's create the image that will display the album artwork for the song that is currently playing.

Album artwork
05:23

Now we're going to add the text elements that will display the track info such as artist name and track name.

Track info labels
06:57

Now we're going to create the volume bar!

Volume bar
05:35
+ Navigation menu
6 lectures 25:41

What we're going to do now is add some containers to our page which will section off certain elements in our page.

Page containers
03:35

Now lets set up the container for the navigation bar.

Creating our navigation bar container
02:55

So now that we have the navigation bar container set up, we can start adding items to it. Lets add the site logo first.

Navigation bar site logo
05:33

Now we are going to put the actual navigation items (links) into the navigation bar.

Navigation items
05:36

We're going to now give the search link a magnifying glass icon.

Navigation search icon
06:11

One small detail we didn't do yet is to make the navigation items links change color when you hover over them. This is real simple and only requires one line of css. 

Navigation links color change on hover
01:51
+ Tables and data
5 lectures 22:59

To store data, we will of course require some database tables. In this video I'm just going to give you a quick overview of our tables including how they link together and what the columns mean.

Overview of our MySQL table structure
05:56

Now we are going to create the tables that we discussed in the previous video.

Creating our database tables
05:12

So in this video I'll show you how we insert data into the artists, genres and albums tables.

Inserting data into the artists, genres and albums tables
06:12

Let's add some songs into the songs table now. Music files can be found in the attached source files. 

Inserting data into the songs table + FREE music files
04:41
Shortcut to inserting data into the songs table
00:58
+ 'Music you might like' page
8 lectures 37:05

Our index page is a bit of a mess at the moment so I'm going to show you a really simple way for us to clean this up.

Organisational trick
03:54

So the last thing to do before we can begin adding contain to the main 'center section' of our website, is to create the containers.

Main view containers
06:22

So everything is now set up for us to be able to add content to our 'main section' of the site. Before we do that, let's just take a few minutes to improve the structure of our site and make things a whole lot easier for us to work with going forward. 

Header and footer files
02:45

So we're going to finally add some content to the main section of our page. Let's start by executing a simple query which goes to the database and selects all the albums. 

Getting albums from the database
05:20

So last time we output the album titles from the database. Now we will output the album artwork images.

Outputting the album artwork images
05:44

Lets work on getting the albums to look a little nicer now. 

Styling the album artwork images
05:24
Styling the album title
02:58

Now we will turn the albums listed on the page into clickable links which will take you to that album's page.

Making the albums clickable links
04:38
+ Album page
15 lectures 01:17:02

On our album page, we need to know which album we should display. We do this by passing the album into the page through the url. In this video we will retrieve the id from the url. 

Getting album id from url
05:22

Now lets use the album id to get the artist of the album.

Getting the artist of the album
03:15

We don't really want to have to manually perform a bunch of MySQL queries each time we want artist information. What we will do now is create an Artist class which will allow us to create an artist object just by passing the artist id into the constructor. 

Creating the Artist class
05:57

So we have our Artist class, now we will create our Album class.

Creating the Album class
07:45

We're now going to create the section at the top of the page which displays album information such as the the album and artist name.

Album header section
04:58

Last time we created the header section for our album page. Now we will apply some css style to it.

Styling the header section
06:18

Now we will make the number of songs show at the top of the page. 

Displaying the number of songs in the album
04:36

We have classes for Album and Artist at the moment, but now we will create a class for Songs.

Creating the Song class
07:27

Before we output the data for each song on the album, we need to first retrieve the data from the songs table in our database. Let's do that now.

Getting the songs on an album
06:56

We're going to output the number which will appear next to each song. This number corresponds to the number of the song on the album. 

Outputting the track count
05:58

Now let's output the song and artist name.

Outputting the track name and artist name
02:43

The final thing to do before we can start styling this page is to output the track duration.

Outputting the track duration
02:17

Finally it's time to start styling what we've been working on over the last few videos. We will start with the row containers for each track. 

Styling the track list rows
03:43

Now we will apply css style to our track count section. 

Styling the track count
04:03

Now we're going to finish up our album page by completing the styling on the track list items.

Track style finishing touches
05:44
+ The music player
29 lectures 02:42:58
Introduction to HTML5 Audio
07:38

When the page load, before the user has selected any music, we will select 10 songs at random form the database and create a virtual playlist. This means when the user presses play (before they have selected a song from the page), there will actually be music to play.

Creating our initial playlist of 10 random songs
06:23

We're going make use of a very good (and extremely popular) JavaScript library called JQuery. In this video we'll add this to our project. 

Including JQuery
01:58

So we have a function in our Audio class which sets the track. We also want a setTrack function outside the track that will do some additional processing to our track before playing it. We're going to do all the preparation in this video so that we can begin working on this function.

Set track function setup
05:46

Now we will start on our setTrack function which will be the main function for loading and playing songs. 

Set track function
04:57

Now let's hook the play and pause buttons up to some code which will allow the user to play and pause the song that is currently playing.

Playing and pausing the song via buttons
06:39
Introduction to Ajax calls
05:55

So let's continue with our ajax call now so that we can get a song from the database without needing to reload the page. 

Getting a song via ajax
07:20

Just as we got the song from the database using an ajax call, we are going to do the same thing to get the artist of the song. 

Getting the artist via ajax
06:26

So following the same style as the last two videos, we are now going to use ajax to get the album of the currently playing song from the database.

Getting the album via Ajax
04:36

We want to keep track of how many times each song has been played so let's implement this now. 

Updating the plays count when a song is played
09:21

What we are going to do now is update the now playing bar to show the time remaining of the currently playing song.

Displaying the time remaining label
03:37

The time remaining label now updates to show the time remaining of the currently playing song. The problem is that it doesn't look great at the moment. What we will do now is write a function to format this value into a nice, readable string. 

Formatting the time remaining
05:41

Now we're going to make the progress bar along the bottom move forward as the song plays.

Updating the progress bar as the song plays
07:11

In this video we'll make our progress bar draggable so that you can skip forward or backwards in the song by dragging the bar with your mouse.

Dragging the progress bar on click
11:45

Now that we can drag on the progress bar to control the song, we will do something very similar on the volume bar which will allow us to control the volume of the song. 

Controlling the volume
04:05
Updating the volume progress bar
04:37

Now to fix something that I said I would do a few videos ago. At the moment, dragging on the progress bar sometimes causes controls to have that blue highlight. This is pretty easy to prevent so let's do that now.

Preventing controls from highlighting on mouse drag
03:42

Now we're going to write the function which will handle playing the next song.

Skipping to the next song
05:52

Now we are going to add the code which will allow songs to be repeated.

Song repeat mode
02:58

Let's hook the repeat button up to the repeat function we wrote!

Repeat button
03:57

One thing I forgot to do earlier was to make it so that when a song ends, it will either play the next song or reset the current song (depending on whether repeat is on or not).

Playing the next song when current song ends
01:42

So at the moment we can skip forward to the next song but we can't go to the previous song. Let's fix that now!

Previous song button
04:07

Now we will add the ability to mute or un-mute the song.

Mute button
03:29

Now it's finally time go start implementing shuffle functionality.

Shuffle button
03:26

So we have our shuffle button set up correctly, but it doesn't do anything yet. Let's begin adding the functionality to it. 

Shuffle - Part 1
06:19

Now we're going to complete the shuffle function that we started last video.

Shuffle - Part 2
10:21

Our album page lists songs that belong to that album. Each one of these songs has a play button which appear next to the song when you hover over it. Let's add the functionality to this play button now.

Playing songs by clicking on the song's play button
08:42

So there's a very small issue which happens when we click on the song's play button. Not to worry, it's an easy fix!

Fixing the song's play button bug
04:28
Requirements
  • No prior knowledge needed! A basic understanding of HTML is helpful - but not essential
  • A computer
Description

Do you want to become an expert in JavaScript, PHP and MySQL?

Do you want to build a real music streaming site just like Spotify?

If so, you’re in the right place! This course will guide you step by step in creating your own Spotify clone COMPLETELY from scratch.

We’re talking the kind of website that will amaze anybody that sees it. The kind of website that will get you hired in no time!

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught thousands of students here on Udemy and created some of the most popular development courses on Udemy!

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own music streaming site just like Spotify complete with:

  • User registration

  • Search for all their favorite artists, albums and songs in real time!

  • Create and customize their own playlists

  • Control the music with all the usual controls such as play, pause, skip, previous, shuffle, repeat etc.

  • And much, much more! 

Whether you are a complete beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials: HTML, CSS, PHP, JQuery, JavaScript and MySQL.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Skills: 

There is so much to learn! In the course, you will become very familiar an excellent range of technical skills such as HTML, CSS, PHP, JavaScript, JQuery and MySQL. Any good developer will agree that these skills are KEY to becoming an excellent developer/software engineer. If you're just starting out, after completing this course, you will be in a very good position with a fundamental foundation of skills. 

Support: 

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I'm always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice - it doesn't matter, I'm always happy to help! I always aim to respond to questions within a few hours and it's also worth noting that I've answered EVERY SINGLE question asked so far on all of my courses.

Future course discounts:

By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy - FOREVER

Project portfolio:

The site you create in this course will be the highlight of your project portfolio! Any potential employer who see's this project on your resume will want to hear all about it. The reason? They know that a project like this means you're familiar with the wide range of technical skills they need their employees to know.  


Fun!

Finally, this project is a lot of fun and I know you'll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for? 

*You don't need any experience to take this course, however a basic understanding of HTML would be great. I will explain everything as I go, but some things I spent more time on than others. I don't spent a huge amount of time on the absolute lowest level basics e.g. what is HTML. So if you have absolutely no experience programming, you are absolutely fine to take this course, just ask me to explain things further if you would like a more detailed explanation :)

Who this course is for:
  • Any aspiring software engineers or web developers dreaming of working at a company like Google, Facebook or Microsoft
  • Anyone who wants to master HTML, JavaScript, PHP, MySQL