{"id":3648,"date":"2022-10-07T23:39:22","date_gmt":"2022-10-07T18:39:22","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3648"},"modified":"2022-10-07T23:39:25","modified_gmt":"2022-10-07T18:39:25","slug":"how-to-make-a-custom-music-player-using-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/","title":{"rendered":"How to Make a Custom Music Player using JavaScript"},"content":{"rendered":"\n

In this tutorial, you will learn\u00a0how to create a custom music player<\/strong>\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music Player<\/strong> project is given below.<\/p>\n\n\n\n

You can download the full source code (including images and songs) of this JavaScript Music Player at the end of this article.<\/p>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>JavaScript Music Player<\/title>\n  <link rel="stylesheet" href="style.css">\n  <link rel="stylesheet" href="https:\/\/fonts.googleapis.com\/icon?family=Material+Icons">\n<\/head>\n<body>\n  <div class="wrapper">\n    <div class="top-bar">\n      <i class="material-icons">expand_more<\/i>\n      <span>Now Playing<\/span>\n      <i class="material-icons">more_horiz<\/i>\n    <\/div>\n    <div class="img-area">\n      <img src="" alt="">\n    <\/div>\n    <div class="song-details">\n      <p class="name"><\/p>\n      <p class="artist"><\/p>\n    <\/div>\n    <div class="progress-area">\n      <div class="progress-bar">\n        <audio id="main-audio" src=""><\/audio>\n      <\/div>\n      <div class="song-timer">\n        <span class="current-time">0:00<\/span>\n        <span class="max-duration">0:00<\/span>\n      <\/div>\n    <\/div>\n    <div class="controls">\n      <i id="repeat-plist" class="material-icons" title="Playlist looped">repeat<\/i>\n      <i id="prev" class="material-icons">skip_previous<\/i>\n      <div class="play-pause">\n        <i class="material-icons play">play_arrow<\/i>\n      <\/div>\n      <i id="next" class="material-icons">skip_next<\/i>\n      <i id="more-music" class="material-icons">queue_music<\/i>\n    <\/div>\n    <div class="music-list">\n      <div class="header">\n        <div class="row">\n          <i class= "list material-icons">queue_music<\/i>\n          <span>Music list<\/span>\n        <\/div>\n        <i id="close" class="material-icons">close<\/i>\n      <\/div>\n      <ul>\n        <!-- here li list are coming from js -->\n      <\/ul>\n    <\/div>\n  <\/div>\n\n  <script src="js\/music-list.js"><\/script>\n  <script src="js\/script.js"><\/script>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: "Poppins", sans-serif;\n}\n*::before, *::after{\n  padding: 0;\n  margin: 0;\n}\n:root{\n  --pink: #ff74a4;\n  --violet: #9f6ea3;\n  --lightblack: #515C6F;\n  --white: #ffffff;\n  --darkwhite: #cecaca;\n  --pinkshadow: #ffcbdd;\n  --lightbshadow: rgba(0,0,0,0.15);\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: linear-gradient(var(--pink) 0%, var(--violet) 100%);\n}\n.wrapper{\n  width: 380px;\n  padding: 25px 30px;\n  overflow: hidden;\n  position: relative;\n  border-radius: 15px;\n  background: var(--white);\n  box-shadow: 0px 6px 15px var(--lightbshadow);\n}\n.wrapper i{\n  cursor: pointer;\n}\n.top-bar, .progress-area .song-timer, \n.controls, .music-list .header, .music-list ul li{\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.top-bar i{\n  font-size: 30px;\n  color: var(--lightblack);\n}\n.top-bar i:first-child{\n  margin-left: -7px;\n}\n.top-bar span{\n  font-size: 18px;\n  margin-left: -3px;\n  color: var(--lightblack);\n}\n.img-area{\n  width: 100%;\n  height: 256px;\n  overflow: hidden;\n  margin-top: 25px;\n  border-radius: 15px;\n  box-shadow: 0px 6px 12px var(--lightbshadow);\n}\n.img-area img{\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.song-details{\n  text-align: center;\n  margin: 30px 0;\n}\n.song-details p{\n  color: var(--lightblack);\n}\n.song-details .name{\n  font-size: 21px;\n}\n.song-details .artist{\n  font-size: 18px;\n  opacity: 0.9;\n  line-height: 35px;\n}\n.progress-area{\n  height: 6px;\n  width: 100%;\n  border-radius: 50px;\n  background: #f0f0f0;\n  cursor: pointer;\n}\n.progress-area .progress-bar{\n  height: inherit;\n  width: 0%;\n  position: relative;\n  border-radius: inherit;\n  background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%);\n}\n.progress-bar::before{\n  content: "";\n  position: absolute;\n  height: 12px;\n  width: 12px;\n  border-radius: 50%;\n  top: 50%;\n  right: -5px;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n  background: inherit;\n  transition: opacity 0.2s ease;\n}\n.progress-area:hover .progress-bar::before{\n  opacity: 1;\n  pointer-events: auto;\n}\n.progress-area .song-timer{\n  margin-top: 2px;\n}\n.song-timer span{\n  font-size: 13px;\n  color: var(--lightblack);\n}\n.controls{\n  margin: 40px 0 5px 0;\n}\n.controls i{\n  font-size: 28px;\n  user-select: none;\n  background: linear-gradient(var(--pink) 0%, var(--violet) 100%);\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.controls i:nth-child(2),\n.controls i:nth-child(4){\n  font-size: 43px;\n}\n.controls #prev{\n  margin-right: -13px;\n}\n.controls #next{\n  margin-left: -13px;\n}\n.controls .play-pause{\n  height: 54px;\n  width: 54px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: linear-gradient(var(--white) 0%, var(--darkwhite) 100%);\n  box-shadow: 0px 0px 5px var(--pink);\n}\n.play-pause::before{\n  position: absolute;\n  content: "";\n  height: 43px;\n  width: 43px;\n  border-radius: inherit;\n  background: linear-gradient(var(--pink) 0%, var(--violet) 100%);\n}\n.play-pause i{\n  height: 43px;\n  width: 43px;\n  line-height: 43px;\n  text-align: center;\n  background: inherit;\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  position: absolute;\n}\n\n.music-list{\n  position: absolute;\n  background: var(--white);\n  width: 100%;\n  left: 0;\n  bottom: -55%;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 5;\n  padding: 15px 30px;\n  border-radius: 15px;\n  box-shadow: 0px -5px 10px rgba(0,0,0,0.1);\n  transition: all 0.15s ease-out;\n}\n.music-list.show{\n  bottom: 0;\n  opacity: 1;\n  pointer-events: auto;\n}\n.header .row{\n  display: flex;\n  align-items: center;\n  font-size: 19px;\n  color: var(--lightblack);\n}\n.header .row i{\n  cursor: default;\n}\n.header .row span{\n  margin-left: 5px;\n}\n.header #close{\n  font-size: 22px;\n  color: var(--lightblack);\n}\n.music-list ul{\n  margin: 10px 0;\n  max-height: 260px;\n  overflow: auto;\n}\n.music-list ul::-webkit-scrollbar{\n  width: 0px;\n}\n.music-list ul li{\n  list-style: none;\n  display: flex;\n  cursor: pointer;\n  padding-bottom: 10px;\n  margin-bottom: 5px;\n  color: var(--lightblack);\n  border-bottom: 1px solid #E5E5E5;\n}\n.music-list ul li:last-child{\n  border-bottom: 0px;\n}\n.music-list ul li .row span{\n  font-size: 17px;\n}\n.music-list ul li .row p{\n  opacity: 0.9;\n}\nul li .audio-duration{\n  font-size: 16px;\n}\nul li.playing{\n  pointer-events: none;\n  color: var(--violet);\n}<\/pre><\/div>\n\n\n\n
js\/music-list.js<\/h3>\n\n\n\n
\/\/ To add more song, just copy the following code and paste inside the array\n\n\/\/   {\n\/\/     name: "Here is the music name",\n\/\/     artist: "Here is the artist name",\n\/\/     img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",\n\/\/     src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"\n\/\/   }\n\n\/\/paste it inside the array as more as you want music then you don't need to do any other thing\n\nlet allMusic = [\n  {\n    name: "Harley Bird - Home",\n    artist: "Jordan Schor",\n    img: "music-1",\n    src: "music-1"\n  },\n  {\n    name: "Ikson Anywhere \u2013 Ikson",\n    artist: "Audio Library",\n    img: "music-2",\n    src: "music-2"\n  },\n  {\n    name: "Beauz & Jvna - Crazy",\n    artist: "Beauz & Jvna",\n    img: "music-3",\n    src: "music-3"\n  },\n  {\n    name: "Hardwind - Want Me",\n    artist: "Mike Archangelo",\n    img: "music-4",\n    src: "music-4"\n  },\n  {\n    name: "Jim - Sun Goes Down",\n    artist: "Jim Yosef x Roy",\n    img: "music-5",\n    src: "music-5"\n  },\n  {\n    name: "Lost Sky - Vision NCS",\n    artist: "NCS Release",\n    img: "music-6",\n    src: "music-6"\n  },\n  \/\/ like this paste it and remember to give comma after ending of this bracket }\n  \/\/ {\n  \/\/   name: "Here is the music name",\n  \/\/   artist: "Here is the artist name",\n  \/\/   img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",\n  \/\/   src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"\n  \/\/ }\n];<\/pre><\/div>\n\n\n\n
js\/script.js<\/h3>\n\n\n\n
const wrapper = document.querySelector(".wrapper"),\nmusicImg = wrapper.querySelector(".img-area img"),\nmusicName = wrapper.querySelector(".song-details .name"),\nmusicArtist = wrapper.querySelector(".song-details .artist"),\nplayPauseBtn = wrapper.querySelector(".play-pause"),\nprevBtn = wrapper.querySelector("#prev"),\nnextBtn = wrapper.querySelector("#next"),\nmainAudio = wrapper.querySelector("#main-audio"),\nprogressArea = wrapper.querySelector(".progress-area"),\nprogressBar = progressArea.querySelector(".progress-bar"),\nmusicList = wrapper.querySelector(".music-list"),\nmoreMusicBtn = wrapper.querySelector("#more-music"),\nclosemoreMusic = musicList.querySelector("#close");\n\nlet musicIndex = Math.floor((Math.random() * allMusic.length) + 1);\nisMusicPaused = true;\n\nwindow.addEventListener("load", ()=>{\n  loadMusic(musicIndex);\n  playingSong(); \n});\n\nfunction loadMusic(indexNumb){\n  musicName.innerText = allMusic[indexNumb - 1].name;\n  musicArtist.innerText = allMusic[indexNumb - 1].artist;\n  musicImg.src = `images\/${allMusic[indexNumb - 1].src}.jpg`;\n  mainAudio.src = `songs\/${allMusic[indexNumb - 1].src}.mp3`;\n}\n\n\/\/play music function\nfunction playMusic(){\n  wrapper.classList.add("paused");\n  playPauseBtn.querySelector("i").innerText = "pause";\n  mainAudio.play();\n}\n\n\/\/pause music function\nfunction pauseMusic(){\n  wrapper.classList.remove("paused");\n  playPauseBtn.querySelector("i").innerText = "play_arrow";\n  mainAudio.pause();\n}\n\n\/\/prev music function\nfunction prevMusic(){\n  musicIndex--; \/\/decrement of musicIndex by 1\n  \/\/if musicIndex is less than 1 then musicIndex will be the array length so the last music play\n  musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;\n  loadMusic(musicIndex);\n  playMusic();\n  playingSong(); \n}\n\n\/\/next music function\nfunction nextMusic(){\n  musicIndex++; \/\/increment of musicIndex by 1\n  \/\/if musicIndex is greater than array length then musicIndex will be 1 so the first music play\n  musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;\n  loadMusic(musicIndex);\n  playMusic();\n  playingSong(); \n}\n\n\/\/ play or pause button event\nplayPauseBtn.addEventListener("click", ()=>{\n  const isMusicPlay = wrapper.classList.contains("paused");\n  \/\/if isPlayMusic is true then call pauseMusic else call playMusic\n  isMusicPlay ? pauseMusic() : playMusic();\n  playingSong();\n});\n\n\/\/prev music button event\nprevBtn.addEventListener("click", ()=>{\n  prevMusic();\n});\n\n\/\/next music button event\nnextBtn.addEventListener("click", ()=>{\n  nextMusic();\n});\n\n\/\/ update progress bar width according to music current time\nmainAudio.addEventListener("timeupdate", (e)=>{\n  const currentTime = e.target.currentTime; \/\/getting playing song currentTime\n  const duration = e.target.duration; \/\/getting playing song total duration\n  let progressWidth = (currentTime \/ duration) * 100;\n  progressBar.style.width = `${progressWidth}%`;\n\n  let musicCurrentTime = wrapper.querySelector(".current-time"),\n  musicDuartion = wrapper.querySelector(".max-duration");\n  mainAudio.addEventListener("loadeddata", ()=>{\n    \/\/ update song total duration\n    let mainAdDuration = mainAudio.duration;\n    let totalMin = Math.floor(mainAdDuration \/ 60);\n    let totalSec = Math.floor(mainAdDuration % 60);\n    if(totalSec < 10){ \/\/if sec is less than 10 then add 0 before it\n      totalSec = `0${totalSec}`;\n    }\n    musicDuartion.innerText = `${totalMin}:${totalSec}`;\n  });\n  \/\/ update playing song current time\n  let currentMin = Math.floor(currentTime \/ 60);\n  let currentSec = Math.floor(currentTime % 60);\n  if(currentSec < 10){ \/\/if sec is less than 10 then add 0 before it\n    currentSec = `0${currentSec}`;\n  }\n  musicCurrentTime.innerText = `${currentMin}:${currentSec}`;\n});\n\n\/\/ update playing song currentTime on according to the progress bar width\nprogressArea.addEventListener("click", (e)=>{\n  let progressWidth = progressArea.clientWidth; \/\/getting width of progress bar\n  let clickedOffsetX = e.offsetX; \/\/getting offset x value\n  let songDuration = mainAudio.duration; \/\/getting song total duration\n  \n  mainAudio.currentTime = (clickedOffsetX \/ progressWidth) * songDuration;\n  playMusic(); \/\/calling playMusic function\n  playingSong();\n});\n\n\/\/change loop, shuffle, repeat icon onclick\nconst repeatBtn = wrapper.querySelector("#repeat-plist");\nrepeatBtn.addEventListener("click", ()=>{\n  let getText = repeatBtn.innerText; \/\/getting this tag innerText\n  switch(getText){\n    case "repeat":\n      repeatBtn.innerText = "repeat_one";\n      repeatBtn.setAttribute("title", "Song looped");\n      break;\n    case "repeat_one":\n      repeatBtn.innerText = "shuffle";\n      repeatBtn.setAttribute("title", "Playback shuffled");\n      break;\n    case "shuffle":\n      repeatBtn.innerText = "repeat";\n      repeatBtn.setAttribute("title", "Playlist looped");\n      break;\n  }\n});\n\n\/\/code for what to do after song ended\nmainAudio.addEventListener("ended", ()=>{\n  \/\/ we'll do according to the icon means if user has set icon to\n  \/\/ loop song then we'll repeat the current song and will do accordingly\n  let getText = repeatBtn.innerText; \/\/getting this tag innerText\n  switch(getText){\n    case "repeat":\n      nextMusic(); \/\/calling nextMusic function\n      break;\n    case "repeat_one":\n      mainAudio.currentTime = 0; \/\/setting audio current time to 0\n      loadMusic(musicIndex); \/\/calling loadMusic function with argument, in the argument there is a index of current song\n      playMusic(); \/\/calling playMusic function\n      break;\n    case "shuffle":\n      let randIndex = Math.floor((Math.random() * allMusic.length) + 1); \/\/genereting random index\/numb with max range of array length\n      do{\n        randIndex = Math.floor((Math.random() * allMusic.length) + 1);\n      }while(musicIndex == randIndex); \/\/this loop run until the next random number won't be the same of current musicIndex\n      musicIndex = randIndex; \/\/passing randomIndex to musicIndex\n      loadMusic(musicIndex);\n      playMusic();\n      playingSong();\n      break;\n  }\n});\n\n\/\/show music list onclick of music icon\nmoreMusicBtn.addEventListener("click", ()=>{\n  musicList.classList.toggle("show");\n});\nclosemoreMusic.addEventListener("click", ()=>{\n  moreMusicBtn.click();\n});\n\nconst ulTag = wrapper.querySelector("ul");\n\/\/ let create li tags according to array length for list\nfor (let i = 0; i < allMusic.length; i++) {\n  \/\/let's pass the song name, artist from the array\n  let liTag = `<li li-index="${i + 1}">\n                <div class="row">\n                  <span>${allMusic[i].name}<\/span>\n                  <p>${allMusic[i].artist}<\/p>\n                <\/div>\n                <span id="${allMusic[i].src}" class="audio-duration">3:40<\/span>\n                <audio class="${allMusic[i].src}" src="songs\/${allMusic[i].src}.mp3"><\/audio>\n              <\/li>`;\n  ulTag.insertAdjacentHTML("beforeend", liTag); \/\/inserting the li inside ul tag\n\n  let liAudioDuartionTag = ulTag.querySelector(`#${allMusic[i].src}`);\n  let liAudioTag = ulTag.querySelector(`.${allMusic[i].src}`);\n  liAudioTag.addEventListener("loadeddata", ()=>{\n    let duration = liAudioTag.duration;\n    let totalMin = Math.floor(duration \/ 60);\n    let totalSec = Math.floor(duration % 60);\n    if(totalSec < 10){ \/\/if sec is less than 10 then add 0 before it\n      totalSec = `0${totalSec}`;\n    };\n    liAudioDuartionTag.innerText = `${totalMin}:${totalSec}`; \/\/passing total duation of song\n    liAudioDuartionTag.setAttribute("t-duration", `${totalMin}:${totalSec}`); \/\/adding t-duration attribute with total duration value\n  });\n}\n\n\/\/play particular song from the list onclick of li tag\nfunction playingSong(){\n  const allLiTag = ulTag.querySelectorAll("li");\n  \n  for (let j = 0; j < allLiTag.length; j++) {\n    let audioTag = allLiTag[j].querySelector(".audio-duration");\n    \n    if(allLiTag[j].classList.contains("playing")){\n      allLiTag[j].classList.remove("playing");\n      let adDuration = audioTag.getAttribute("t-duration");\n      audioTag.innerText = adDuration;\n    }\n\n    \/\/if the li tag index is equal to the musicIndex then add playing class in it\n    if(allLiTag[j].getAttribute("li-index") == musicIndex){\n      allLiTag[j].classList.add("playing");\n      audioTag.innerText = "Playing";\n    }\n\n    allLiTag[j].setAttribute("onclick", "clicked(this)");\n  }\n}\n\n\/\/particular li clicked function\nfunction clicked(element){\n  let getLiIndex = element.getAttribute("li-index");\n  musicIndex = getLiIndex; \/\/updating current song index with clicked li index\n  loadMusic(musicIndex);\n  playMusic();\n  playingSong();\n}<\/pre><\/div>\n\n\n\n
\n\n\n\n
Download Source Code (including images and songs)<\/h2>\n\n\n
Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn\u00a0how to create a custom music player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music Player project is given below. You can download the full source code (including images and songs) of this JavaScript Music Player at the end of this article. index.html style.css js\/music-list.js js\/script.js … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Make a Custom Music Player using JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn\u00a0how to create a custom music player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Custom Music Player using JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn\u00a0how to create a custom music player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T18:39:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T18:39:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Music-Player-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Custom Music Player using JavaScript","description":"In this tutorial, you will learn\u00a0how to create a custom music player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Custom Music Player using JavaScript","og_description":"In this tutorial, you will learn\u00a0how to create a custom music player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T18:39:22+00:00","article_modified_time":"2022-10-07T18:39:25+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Music-Player-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Make a Custom Music Player using JavaScript","datePublished":"2022-10-07T18:39:22+00:00","dateModified":"2022-10-07T18:39:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/"},"wordCount":80,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Music-Player-in-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/","name":"How to Make a Custom Music Player using JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Music-Player-in-JavaScript.jpg","datePublished":"2022-10-07T18:39:22+00:00","dateModified":"2022-10-07T18:39:25+00:00","description":"In this tutorial, you will learn\u00a0how to create a custom music player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Music","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Music-Player-in-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Music-Player-in-JavaScript.jpg","width":880,"height":495,"caption":"How to Make a Custom Music Player using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-custom-music-player-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make a Custom Music Player using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3648\/revisions"}],"predecessor-version":[{"id":3650,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3648\/revisions\/3650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3651"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}