Forem: Themba🇿🇦

How to build a music player part 2: Introduction MySQL database

Themba🇿🇦 — Mon, 15 May 2023 17:08:47 +0000

Hey, in our previous article we created a basic music player using HTML, CSS and javascript. If you have not seen that article click here. In the previous article we hard coded all our songs inside a javascript object.

Now we are going to create a database where we can store our music so we don’t need to hard code anything. For this project we are going to need a database and so we are going to use MySQL for this project.

Step 1: Setup

You are first going to download and install MySQL. In order to do that you going to head to the mysql website https://dev.mysql.com/downloads/mysql/ and select the OS you using then download, then follow all the prompts and install MySQL

Step 2: Create a database

After installing mysql, you going to open your command prompt or terminal and enter.

Mysql.server start

This will start a mysql service

Next you will create a new user and password by running

mysql -u root -p

You will be asked to enter a password, enter a password you will remember as you will need to know this in the future to access your mysql.

After that you will run this command to create a new user

CREATE USER 'myuser'@'localhost' IDENTIFIED BY 'mypassword';

As you can see from the above code, when you create something in mysql, you have to start by writing “CREATE”.

Now in order for you to create a database all you have to do is run

CREATE DATABASE music_database;

And last but not least you going to grant the new user all the privileges so they can edit the database

GRANT ALL PRIVILEGES ON mydatabase.* TO 'myuser'@'localhost';

Step 2: Creating the tables

You now have a database but your database has no tables. Tables are essential in relational databases because they help to structure and organise our data. Each table represents an entity and each table is made up of columns which are attributes of that entity. So for our music_database you need a table where you going to store the meta data of your song, but before we create the table you have to know what columns you need inside your table. So by looking at our javascript object you can already see that you going to need a column for name of song, artist and url, but we will also add an additional column called date_created cause its just good practice to always know when a piece of data was created and also updated but I doubt we will be editing our music information so you do not need to add that one for this project. So here are our columns;

Name_of_song
Name_of_artist
Url
Date_created

In SQL each column has to be assigned a datatype, there are about 20+ datatypes in mysql but the most common ones are; VARCHAR, INTEGER, TINYINT, CHAR, DATETIME.

Oops before we create our table I almost forgot a very important thing when creating a table, the ID. Each row in a table needs to have an ID, most times the ID needs to be unique meaning there will be only be one instance of that particular ID in the table and no replica. The ID is essential in relational databases cause without it we can not use foreign keys and which is one of the things that make relational databases awesome, but we won’t get into that today so just to clarify these are our columns that we need for our music table with their datatypes;

Id INT
Name_of_song VARCHAR
Name_of_artist VARCHAR
Url VARCHAR
Date_created DATETIME

Lets create.

First run

USE music_databse

Create table music…

CREATE TABLE music (
    Id int(9) AUTO_INCREMENT PRIMARY KEY,,
    Name_of_song varchar(255) NOT NULL,
    Name_of_artist varchar(255) NOT NULL,
    Url varchar(255) NOT NULL,
    Date_created datetime NOT NULL DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO music
(name_of_song, name_of_artist, url)
VALUES 
("One More Time", "Daft Punk", "/songs/One more time.mp3"),
("Lost One", "Jay-Z", "/songs/05 Lost One.mp3"),
("Otis", "Jay Z and Kanye West", "/songs/04 Otis.mp3"),
("U don't know", "Jay-Z", "/songs/06 U Don't Know.mp3"),
("Threat", "Jay-Z", "/songs/07 Threat.mp3");

Cool, now your database is set.

In the next article we will create a backend for our music player which will help us connect our database with our frontend using fetch api.

How to use regex in javascript:

Themba🇿🇦 — Tue, 09 May 2023 20:28:43 +0000

Hey, for today’s blog we going to create a function which takes away spaces and special characters from an input and inserts an underscore using regular expressions or regex.
The reason you would need this piece of code is, special characters can cause alot of problems in your database and system if not handled properly so you would need a way to get rid of them if a user had to insert them.

So what is a regular expression.
A regular expression, commonly referred to as regex or regexp, is a sequence of characters that define a search pattern. It is mainly used for text-based searching and string manipulation.

So for our program we going to create a simple input with a button which will display the word inside the input when clicked, but if the word inside the input has spaces or special characters it will replace it with an underscore.

<input type="text">
<button onclick="displayWord()">Display</button>
<h1 id="word"></h1>

function displayWord() {
         let word = document.querySelector('input').value // Grab the value inside the input
         .trim() // remove all the white space on the left and right
         .replace(/[\s\W]+/ig, "_"); // replace all spaces in between words and all characters with underscore

           document.getElementById("word").innerHTML = word;
        }

Inside our replace function I added in regex, the “\s” is looking for all the spaces and the \W is looking for all the non-word characters or special characters which are for e.g: !, @, #, $, %.... The “+” just means that the regex should look for one or more occurrences of the whatever we looking for. The “i” means that the regex should be case-insensitive meaning it should treat “HELLO” the same as “hello”. The “g” means the regular expression should perform a global match meaning if a sentence contains multiple instances of the same word it should find all of them and not just stop on the first match.

How to build a music player with HTML, CSS and javascript

Themba🇿🇦 — Sun, 07 May 2023 17:27:53 +0000

In this tutorial I will show you how to build a simple music player which you can add to your portfolio. This is a great project to build if you are a beginner in web development because it will show how to use event listeners in javascript. Let’s get started.

Step 1: Setup

So for this project I will be using vscode. It is the best IDE for web development because when you are doing web development you are working with more than one coding language and so vscode is the best because it accommodates all the languages and you can install extensions to help you code.

Our first step is to create the folder for our project. You will open your vscode and you will go to the menu bar at the top, click terminal then click new terminal which will open your terminal at the bottom. Inside your terminal you will run this command to create a new folder, I’m going to call mine musicplayer

mkdir musicplayer

After that we are going to go into the new folder by running this command

cd musicplayer

Inside the folder we going to create 3 more folders

mkdir css js songs

And lastly we going to create 3 new files in different folders.

touch index.html css/style.css js/main.js

Step 2: Adding the structure

Inside your index.html file you are going to add the structure to our application.

TIP: If you are using vscode there is an extension called html5-boilerplate that you can install. This extension helps to build a basic html boilerplate code so you don’t have to code the obvious stuff

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title></title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="">
  </head>
  <body>
     <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->

     <script src="" async defer></script>
  </body>
</html>

Inside your body you will create a div with id of main and class of container. Inside of that you will create more divs for the different parts of our music player.


<div id="main" class="container">
        <div id="visuals"></div>
        <div id="metadetails">
           <div id="details">

              <div id="detail-text">
                 <h1 id="song-name">Name Of Song</h1>
                 <p id="artist-name">Artist name</p>
              </div>
           </div>
           <div id="div-slider">
              <span id="timeplayed">00:00</span>
              <div id="greyslider">
                 <div id="fillbar"></div>
                 <div draggable="true" id="slider-nob"></div>
              </div>
              <span id="duration">04:56</span>
           </div>
        </div>
        <div id="controls">
           <button id="previous" onclick="prevSong()">
              <i class="fas fa-step-backward"></i>
           </button>
           <button id="play">
              <i class="fas fa-solid fa-play"></i>
           </button>
           <button id="next" onclick="nextSong()">
              <i class="fas fa-step-forward"></i>
           </button>
        </div>
     </div>

Next you will move to your style.css file in your css folder but before that you will link your css file and js file to your html page, so inside your head tag will add this link:

<link rel="stylesheet" href="css/style.css">

And also

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet">

The link above is a style link to the fontawesome CDN, this will help in adding icons without having to download and store them inside a img folder.

Step 3: CSS - add some style

At this point all you have is a bare bone html page so you going to add some style your page by going into your style.css file and styling each tag

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  padding: 0;
  margin: 0;
}

#main {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: 60% 1fr 15%;
  background-image: linear-gradient(blue, #000);
}

#metadetails {
  padding: 2%;
}

#details {
  display: flex;
}

#details div {
  margin: 0 2%;
}

#detail-text h1, #detail-text p {
  margin: 0;
}

#controls {
  display: flex;
  place-items: center;
  justify-content: center;
}

button {
  background: none;
  border: none;
  font-size: larger;
  color: grey;
}

#play {
  background-color: #ffffff;
  border-radius: 50rem;
  font-size: x-large;
  color: #000;
  margin: 2%;
  width: 60px;
  height: 60px;
}

#div-slider {
  padding: 1%;
  display: flex;
  place-items: center;
  justify-content: center;
}

#greyslider {
  display: flex;
  position: relative;
  width: 100%;
  height: 5px;
  margin: 1%;
  background-color: grey;
}

#fillbar {
  background-color: #ffffff;
  width: 0;
  height: 100%;
}

#slider-nob {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  transform: translate(0, -5px);
}

Step 4: JS - time to bring it to life

Now the fun begins, you going to open your main.js file and here we going to add all the javascript that will make the music player dynamic. You going to be using alot of event listeners here. The thing with event listeners is that there is couple of ways you can write an event listener but for this project we gong to use the old school way which is object.addEventListener(“event”, function).

If you new to web development let me take a moment to explain what an event listener is:
An event listener is as the name implies, it’s a piece of code that listens for events. What are are events? Events are actions that happen inside the DOM, every action is an event, when you move your mouse, when you swipe your finger on the screen, when you click, drag, hover, any action that happens inside a webpage is an event and we can listen to these events so that when that event happens we can can run a particular piece of code, for instance; if we want to play an audio when the play button is clicked, we will create an event listener for the button which will be activated when the button is clicked and then run code which is embedded inside the event listener.

To begin you will declare several variables inside of our js file which we will use.

let current_song = 0;
let audio = null;
let duration = 0;
let playing = false;
let play_pause_btn = document.getElementById("play");
let grey_slider = document.getElementById("greyslider");
let fillbar = document.getElementById("fillbar");
let audio_slider = document.getElementById("slider");
let slider_nob = document.getElementById("slider-nob");
let currentPos, newPos, startPos = 0;

Next since this is a simple music player, you will have to hardcode your objects. In this case your objects will be your music. So you're going to create an array with objects of the different songs.

let songs = [
  {
     song_name: "One More Time",
     artist: "Daft Punk",
     url: "/songs/One more time.mp3",
  },
  {
     song_name: "Otis",
     artist: "Jay Z and Kanye West",
     url: "/songs/04 Otis.mp3",
  },
  {
     song_name: "Lost One",
     artist: "Jay-Z",
     url: "/songs/05 Lost One.mp3",
  },
  {
     song_name: "U don't know",
     artist: "Jay-z",
     url: "/songs/06 U Don't Know.mp3",
  },
  {
     song_name: "Threat",
     artist: "Jay-Z",
     url: "/songs/07 Threat.mp3"
  }
];

As you can see from the url, I have saved all my songs inside the songs folder, so you can put all your music in there.

Next you need to figure out which functions your music player will need, The process i use to come up with my functions is I ask myself first what can the user do on my page, for this project the user can;

Play a song
Pause a song
Skip to the next song
Skip to the previous song
Skip to a particular part of a song

Next ask yourself what does the system need to do so the program works properly;

Set a song
Display duration of the song
Display the name and artist of the song
Move the seeker

By doing this simple exercise you have come up with the basic functions you will need to get started, this process will help keep your code neat and organised. Obviously you will not have everything figured out on your first try of this exercise cause there is always something in code that you have not thought of in your planning phase.

For this project you will use a Javascript constructor called Audio. This is a built in javascript library that will help you play audio. You will start by creating a function that will help set the song

function setSong(index) {
  audio = new Audio(songs[index].url);
  audio.addEventListener("loadeddata", () => {
     audio.controls = true;
     duration = audio.duration;
     document.getElementById("song-name").innerHTML = songs[index].song_name;
     document.getElementById("artist-name").innerHTML = songs[index].artist;
     document.getElementById("duration").innerHTML = convertTime(duration);
  })

  // Listen for when the song ends
  audio.addEventListener("ended", () => {
     nextSong();
  })
}

Next you will create functions for when the user wants to skip to the next or previous song.

function nextSong() {
  audio.pause();
  if(current_song + 1 == songs.length) {
     current_song = 0;
  }else {
     current_song++;
  }
  setSong(current_song);

  // if it was playing then automatically play the next song
  if(playing) {
     audio.play();
     setSeeker();
  } else {
     fillbar.style.width = 0;
     slider_nob.style.left = 0;
  }
}

function prevSong() {
  audio.pause();

  if(current_song == 0) {
     current_song = songs.length - 1;
  }else {
     current_song--;
  }
  setSong(current_song);

  // if it was playing then automatically play the next song
  if(playing) {
     audio.play();
     setSeeker();
  } else {
     fillbar.style.width = 0;
     slider_nob.style.left = 0;
  }

}

Next you will create a function to update the seeker.

function updateSeeker() {
  document.getElementById("timeplayed").innerHTML = convertTime(audio.currentTime);
  let percentage = (audio.currentTime / duration * 100).toFixed(1);
  fillbar.style.width = percentage + "%";
  slider_nob.style.left = (audio.currentTime/ duration * grey_slider.clientWidth).toFixed(1) + "px";
}

function updateSeeker() {
  document.getElementById("timeplayed").innerHTML = convertTime(audio.currentTime);
  let percentage = (audio.currentTime / duration * 100).toFixed(1);
  fillbar.style.width = percentage + "%";
  slider_nob.style.left = (audio.currentTime/ duration * grey_slider.clientWidth).toFixed(1) + "px";
}

function setSeeker() {
  audio.addEventListener("timeupdate", updateSeeker);
}







// Convert time to minutes and seconds so you can dislplay on page
function convertTime(time) {
  // time is already in seconds so there is no need to calculate secinds
  let secs = Math.floor(time);
  let mins = Math.floor(secs / 60);

  secs = secs % 60;
  mins = mins % 60;

  return mins.toString().padStart(2, '0') + ":" + secs.toString().padStart(2, '0')
}



// This function tracks the seeker
function moveObj(e) {
  // calculate the new position
  newPos = startPos - e.clientX;

  // with each move we also want to update the start X and Y
  startPos = e.clientX;

  // set the element's new position:
  if ((slider_nob.offsetLeft - newPos) >= 0 && (slider_nob.offsetLeft - newPos) <= grey_slider.clientWidth - slider_nob.clientWidth) {

     slider_nob.style.left = (slider_nob.offsetLeft - newPos) + "px";
     let percentage = ((slider_nob.offsetLeft - newPos) / (grey_slider.clientWidth - slider_nob.clientWidth) * 100).toFixed(1);
     fillbar.style.width = percentage + "%";

     audio.currentTime = (percentage / 100) * duration;

   }
}

After creating all the functions we need for our program, you are going to add the event listeners which will bring the application to life. The event listeners will listen for any actions that occur in the application and run the function attached to it.

play_pause_btn.addEventListener("click", () => {
  if(!playing) {
     audio.play();
     play_pause_btn.innerHTML = '<i class="fas fa-solid fa-pause"></i>';
     playing = true;
  } else {
     audio.pause();
     play_pause_btn.innerHTML = '<i class="fas fa-solid fa-play"></i>';
     playing = false;
  }
  setSeeker();
})






// mousedown event occurs when a user presses the mouse button on an event
slider_nob.addEventListener("mousedown", (e) => {
  e.preventDefault();
  audio.removeEventListener("timeupdate", updateSeeker);

  // Get the starting position of the cursor
  startPos = e.clientX;

  // mousemove event occurs when a user moves their mouse
  document.addEventListener("mousemove", moveObj);

  // mouseup occurs when a user releases the mouse button
  document.addEventListener("mouseup", () => {
     document.removeEventListener("mousemove", moveObj);
     audio.addEventListener("timeupdate", updateSeeker);
  })
})


setSong(current_song);

So we just created a simple music player with html, css and javascript and you got an introduction to event listeners. Next time we will take this project to the next level by adding a database with MYSQL so you do not have to hardcode your songs in javascript so stay tuned for part 2 of the music player.

You can also follow me on twitter here