const image = document.querySelector('#cover');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
const music = document.querySelector('audio');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const prevBtn = document.getElementById('prev');
const playBtn = document.getElementById('play');
const nextBtn = document.getElementById('next'); /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
const background = document.getElementById("background");
// Music
const songs = [
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
displayName: 'Yıldız Tozu',
artist: 'Ozbi',
cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',
displayName: 'You\'re Somebody Else',
artist: 'flora cash',
cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/3.mp3',
displayName: 'Powerless', /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
artist: 'Linkin Park',
cover: "https://images.genius.com/c5a58cdaab9f3199214f0e3c26abbd0e.1000x1000x1.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/4.mp3',
displayName: 'Seni Dert Etmeler',
artist: 'Madrigal',
cover: "https://www.radyomega.fm/wp-content/uploads/2020/04/MADRIGAL-600.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/5.mp3',
displayName: 'Ederlezi',
artist: 'Solomun', /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
cover: "https://m.media-amazon.com/images/I/616t0841uvL._SS500_.jpg",
},
];
// Check if Playing
let isPlaying = false;
// Play
function playSong() {
isPlaying = true;
playBtn.classList.replace('fa-play', 'fa-pause');
playBtn.setAttribute('title', 'Pause');
music.play();
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
// Pause
function pauseSong() {
isPlaying = false;
playBtn.classList.replace('fa-pause', 'fa-play');
playBtn.setAttribute('title', 'Play');
music.pause();
}
// Play or Pause Event Listener
playBtn.addEventListener('click', () => (isPlaying ? pauseSong() : playSong()));
// Update DOM
function loadSong(song) {
title.textContent = song.displayName;
artist.textContent = song.artist;
music.src = song.path; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
changeCover(song.cover);
}
function changeCover(cover) {
image.classList.remove('active');
setTimeout(() => {
image.src = cover;
image.classList.add('active');
}, 100)
background.src = cover;
}
// Current Song
let songIndex = 0;
// Previous Song /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
// Next Song
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
} /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
loadSong(songs[songIndex]);
playSong();
}
// On Load - Select First Song
loadSong(songs[songIndex]);
// Update Progress Bar & Time
function updateProgressBar(e) {
if (isPlaying) {
const { duration, currentTime } = e.srcElement;
// Update progress bar width
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// Calculate display for duration
const durationMinutes = Math.floor(duration / 60); /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
let durationSeconds = Math.floor(duration % 60);
if (durationSeconds < 10) {
durationSeconds = `0${durationSeconds}`;
}
// Delay switching duration Element to avoid NaN
if (durationSeconds) {
durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
}
// Calculate display for currentTime /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if (currentSeconds < 10) {
currentSeconds = `0${currentSeconds}`;
}
currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
} /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
}
// Set Progress Bar
function setProgressBar(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const { duration } = music;
music.currentTime = (clickX / width) * duration;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
// Event Listeners
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
music.addEventListener('ended', nextSong);
music.addEventListener('timeupdate', updateProgressBar);
progressContainer.addEventListener('click', setProgressBar);
How to put my own music file from my google drive into the script above. I tried using the link given by google drive but it doesn't play my mp3 audio file.
ReplyDeleteIn this case, the mp3 uploaded to Google Drive does not work. You can upload to linkedin or github and then use. You can also use any mp3 from your device. For that you add the rename (rename.mp3 or rename.wev) of that mp3 in place of the link.
DeleteOf course in this case you have to put your programming code (heml,css,js, etc) and mp3 in the same folder.
Hey, thank you for this.
ReplyDeleteIf you could help me, I'd like to remove the large background so that I just have the player itself.
How can I go about doing this?
For that removed ".bg-container img" style code from CSS code
Delete