Music/app project

README.md

@@ -0,0 +1,19 @@
+# MUSIC PLAYER / MUSIC APP
+
+## DESIGNED BY BOLAJI OLUWATOBILOBA
+
+### DESIGNED
+
+#### Music player with javascript
+
+  Function That will be displaying Are:
+
+1) Random Song
+2) Previous Song
+3) Next Song
+4) Repeat Song
+
+![Destop-veiw](/images/MUSIC%20PLAYER%20IMAGE.png)
+![Destop-veiw](/images/Responsiveness.png)
+
+##### THANKS

index.js

@@ -0,0 +1,186 @@
+let now_playing = document.querySelector('.now-playing');
+let track_art = document.querySelector('.track-art');
+let track_name = document.querySelector('.track-name');
+let track_artist = document.querySelector('.track-artist');
+
+let playpause_btn = document.querySelector('.playpause-track');
+let next_btn = document.querySelector('.next-track');
+let prev_btn = document.querySelector('.prev-track');
+
+let seek_slider = document.querySelector('.seek_slider');
+let volume_slider = document.querySelector('.volume_slider');
+let curr_time = document.querySelector('.current-time');
+let total_duration = document.querySelector('.total-duration');
+let wave = document.getElementById('wave');
+let randomIcon = document.querySelector('.fa-random');
+let curr_track = document.createElement('audio');
+
+let track_index = 0;
+let isPlaying = false;
+let isRandom = false;
+let updateTimer;
+
+const music_list = [
+    {
+        img : 'images/Beller.png',
+        name : 'Loner',
+        artist : ' Bella Shmurda',
+        music : 'music/Bella Shmurda - Loner (NetNaija.com).mp3'
+    },
+    {
+        img : 'images/Davido&olamide.png',
+        name : 'The Money',
+        artist : 'Davido , Olamide',
+        music : 'music/Davido_-_The_Money_(ft._Olamide)_(www.NETNAIJA.com).mp3'
+    },
+    {
+        img : 'images/Steve-crown.png',
+        name : 'You Are Yahweh',
+        artist : 'Steve Crown',
+        music : 'music/music4.mp3'
+    },
+    {
+        img : 'images/Jehovah.png',
+        name : ' Jehovah ',
+        artist : 'Tope Alabi , Victor Ademofe',
+        music : 'music/music5.mp3'
+    },
+    {
+        img : 'images/STEVE.png',
+        name : ' WE WAIT ON YOU ',
+        artist : 'Steve Crown',
+        music : 'music/music6.mp3'
+    },
+    {
+        img : 'images/EmmaohmyGod.png',
+        name : ' WONDERS',
+        artist : 'EmmaOhMaGod',
+        music : 'music/music2.mp3'
+    }
+];
+loadTrack(track_index);
+
+function loadTrack(track_index){
+    clearInterval(updateTimer);
+    reset();
+
+    curr_track.src = music_list[track_index].music;
+    curr_track.load();
+
+    track_art.style.backgroundImage = "url(" + music_list[track_index].img + ")";
+    track_name.textContent = music_list[track_index].name;
+    track_artist.textContent = music_list[track_index].artist;
+    now_playing.textContent = "TOBI music Playlist " + (track_index + 1) + " of " + music_list.length;
+
+    updateTimer = setInterval(setUpdate, 1000);
+
+    curr_track.addEventListener('ended', nextTrack);
+    random_bg_color();
+}
+
+function random_bg_color(){
+    let hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e'];
+    let a;
+
+    function populate(a){
+        for(let i=0; i<6; i++){
+            let x = Math.round(Math.random() * 14);
+            let y = hex[x];
+            a += y;
+        }
+        return a;
+    }
+    let Color1 = populate('#');
+    let Color2 = populate('#');
+    var angle = 'to right';
+
+    let gradient = 'linear-gradient(' + angle + ',' + Color1 + ', ' + Color2 + ")";
+    document.body.style.background = gradient;
+}
+function reset(){
+    curr_time.textContent = "00:00";
+    total_duration.textContent = "00:00";
+    seek_slider.value = 0;
+}
+function randomTrack(){
+    isRandom ? pauseRandom() : playRandom();
+}
+function playRandom(){
+    isRandom = true;
+    randomIcon.classList.add('randomActive');
+}
+function pauseRandom(){
+    isRandom = false;
+    randomIcon.classList.remove('randomActive');
+}
+function repeatTrack(){
+    let current_index = track_index;
+    loadTrack(current_index);
+    playTrack();
+}
+function playpauseTrack(){
+    isPlaying ? pauseTrack() : playTrack();
+}
+function playTrack(){
+    curr_track.play();
+    isPlaying = true;
+    track_art.classList.add('rotate');
+    wave.classList.add('loader');
+    playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
+}
+function pauseTrack(){
+    curr_track.pause();
+    isPlaying = false;
+    track_art.classList.remove('rotate');
+    wave.classList.remove('loader');
+    playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
+}
+function nextTrack(){
+    if(track_index < music_list.length - 1 && isRandom === false){
+        track_index += 1;
+    }else if(track_index < music_list.length - 1 && isRandom === true){
+        let random_index = Number.parseInt(Math.random() * music_list.length);
+        track_index = random_index;
+    }else{
+        track_index = 0;
+    }
+    loadTrack(track_index);
+    playTrack();
+}
+function prevTrack(){
+    if(track_index > 0){
+        track_index -= 1;
+    }else{
+        track_index = music_list.length -1;
+    }
+    loadTrack(track_index);
+    playTrack();
+}
+function seekTo(){
+    let seekto = curr_track.duration * (seek_slider.value / 100);
+    curr_track.currentTime = seekto;
+}
+function setVolume(){
+    curr_track.volume = volume_slider.value / 100;
+}
+function setUpdate(){
+    let seekPosition = 0;
+    if(!isNaN(curr_track.duration)){
+        seekPosition = curr_track.currentTime * (100 / curr_track.duration);
+        seek_slider.value = seekPosition;
+
+        let currentMinutes = Math.floor(curr_track.currentTime / 60);
+        let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
+        let durationMinutes = Math.floor(curr_track.duration / 60);
+        let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
+
+        if(currentSeconds < 10) {currentSeconds = "0" + currentSeconds; }
+        if(durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
+        if(currentMinutes < 10) {currentMinutes = "0" + currentMinutes; }
+        if(durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
+
+        curr_time.textContent = currentMinutes + ":" + currentSeconds;
+        total_duration.textContent = durationMinutes + ":" + durationSeconds;
+    }
+}
+

project.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>MUSIC PLAYER</title>
+</head>
+<body>
+<div class="General-container">
+    <div class="Music-container">
+        <div class="Playing-track">
+            <div class="now-playing">Tobi Music playlist x OF y</div>
+            <div class="track-art"></div>
+            <div class="track-name">Track Name</div>
+            <div class="track-artist">Track Artist</div>
+        </div>
+        <div class="slider_container">
+            <div class="current-time">00:00</div>
+             <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
+             <div class="total-duration">00:00</div>
+        </div>
+        <div class="slider_container">
+            <i class="fa fa-volume-down"></i>
+             <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
+             <i class="fa fa-volume-up"></i>
+        </div>
+        <div class="buttons">
+            <div class="random-track" onclick="randomTrack()">
+                <i class="fas fa-random fa-2x" title="random"></i>
+            </div>
+            <div class="prev-track" onclick="prevTrack()">
+                 <i class="fa fa-step-backward fa-2x"></i>
+             </div>
+             <div class="playpause-track" onclick="playpauseTrack()">
+                 <i class="fa fa-play-circle fa-5x"></i>
+             </div>
+             <div class="next-track" onclick="nextTrack()">
+                 <i class="fa fa-step-forward fa-2x"></i>
+             </div>
+             <div class="repeat-track" onclick="repeatTrack()">
+                 <i class="fa fa-repeat fa-2x" title="repeat"></i>
+             </div>
+        </div>
+        <div id="wave">
+            <span class="stroke"></span>
+            <span class="stroke"></span>
+            <span class="stroke"></span>
+            <span class="stroke"></span>
+            <span class="stroke"></span>
+            <span class="stroke"></span>
+            <span class="stroke"></span>
+        </div>  
+    </div>
+</div>
+<footer>
+    Copyright @
+    <a
+      href="https://github.com/TCROWN10/WEB2-FINAL-PROJECT"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      BOLAJI OLUWATOBILOBA
+    </a>
+    <span id="Year">2024</span>
+  </footer>
+    <script src="index.js" ></script>
+</body>
+</html>