0

I am making a song player and wish to add a feature in which user can add new song by clicking on choose file, but the filepath of the selected song is wrong , it adds something like "fakepath" to directory. Why is it happening . please help me

While console logging FilePath variable , It gives result as "C:\fakepath\Levels.mp3"

console.log("Welcome to Spotify ! ")

// Initialize the variables 
let total =7
let songIndex =0;
let masterPlay = document.getElementById('masterPlay')
let myProgressBar = document.getElementById('myProgressBar')
let gif = document.getElementById('gif')
let songItems = Array.from(document.getElementsByClassName('songItem'))
let songInfo = document.getElementById('songInfo')
let songItemContainer = document.getElementById('songItemContainer')
let songs =[
    {songName: "GOAT", filePath: "./songs/GOAT.mp3",coverPath: "./covers/cover1.jpg"},
    {songName: "Alone", filePath: "./songs/Alone.mp3",coverPath: "./covers/cover2.jpg"},
    {songName: "Homicide", filePath: "./songs/Homicide.mp3",coverPath: "./covers/cover3.jpg"},
    {songName: "Satisfy", filePath: "./songs/Satisfy.mp3",coverPath: "./covers/cover4.jpg"},
    {songName: "Levels", filePath: "./songs/Levels.mp3",coverPath: "./covers/cover5.jpeg"},
    {songName: "Game Over", filePath: "./songs/GameOver.mp3",coverPath: "./covers/cover6.jpg"},
    {songName: "OG", filePath: "./songs/OG.mp3",coverPath: "./covers/cover7.png"},
];
const searchInput = document.querySelector('[data-search]')

let audioElement = new Audio(songs[0].filePath);
songInfo.innerText = songs[0].songName

var currentTime =""
var play = ""



// declare function 

var convertTime = function(time)
{    
    var mins = Math.floor(time / 60);
    if (mins < 10) {
      mins = '0' + String(mins);
    }
    var secs = Math.floor(time % 60);
    if (secs < 10) {
      secs = '0' + String(secs);
    }

    return mins + ':' + secs;
}

const updtSng = ()=>{
    songItems.forEach((element,i)=>{
        element.getElementsByTagName('img')[0].src = songs[i].coverPath
        element.getElementsByTagName('span')[0].innerText= songs[i].songName
        var audioElement1 = new Audio(songs[i].filePath)
        audioElement1.onloadedmetadata = function(){
    
            document.getElementsByClassName('timeStamp')[i].innerText = convertTime(parseInt(audioElement1.duration))
        }
    
    })

}

updtSng()


const makeAllPlays = ()=>{
    Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{
        element.classList.remove('fa-circle-pause')
        element.classList.add('fa-circle-play')
    })
}

const makePlay = (element)=>{
    element.classList.remove("fa-circle-pause")
    element.classList.add("fa-circle-play")

}

const makePause = (element)=>{
    element.classList.remove("fa-circle-play")
    element.classList.add("fa-circle-pause")
}



// Listen to events     

audioElement.addEventListener('timeupdate',()=>{
    
    // Update seekbar 
    progress = parseInt((audioElement.currentTime/audioElement.duration)*100)
    myProgressBar.value = progress
    
})

myProgressBar.addEventListener('change',()=>{
    audioElement.currentTime = (myProgressBar.value * audioElement.duration)/100
})



// play and pause 

Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{
    element.addEventListener('click',(e)=>{
        songIndex = parseInt(e.target.id)
        makeAllPlays()
        songInfo.innerText = songs[songIndex].songName
        audioElement.src = songs[songIndex].filePath
        if (play ==0 ||   currentTime<=0){
            audioElement.ontimeupdate = function(){
                currentTime =parseInt(audioElement.currentTime)    
                console.log(parseInt(audioElement.currentTime))
    
            }
            
            audioElement.play();
            makePause(masterPlay)
            makePause(e.target)

            gif.style.opacity = 1
            play =1
            
            
            
            
        }
        
        else  {
            audioElement.pause();
            makePlay(masterPlay)
            makePlay(e.target)

            audioElement.currentTime= currentTime
            gif.style.opacity = 0
            play =0
        }
        
        
    })
})

// play, next & previous

masterPlay.addEventListener("click",()=>{
    if (audioElement.paused || audioElement.currentTime<=0){
        audioElement.play();
        makePause(masterPlay)

        songItemPlay = document.getElementById(songIndex)
        makePause(songItemPlay)
        gif.style.opacity = 1
        
    }
    else{
        audioElement.pause();
        makePlay(masterPlay)

        gif.style.opacity = 0
        songItemPlay = document.getElementById(songIndex)

        makePlay(songItemPlay)
        
    }
})

document.getElementById('previous').addEventListener('click',()=>{
    if(songIndex===0){
        songIndex=0
    }
    else{
        songItemPlay = document.getElementById(songIndex)
        makePlay(songItemPlay)
        songIndex -=1
    }
    songItemPlay = document.getElementById(songIndex)
    makePause(songItemPlay)
    makePause(masterPlay)

    songInfo.innerText = songs[songIndex].songName
    audioElement.src = songs[songIndex].filePath
    audioElement.play()
    audioElement.currentTime=0
})
document.getElementById('next').addEventListener('click',()=>{
    if(songIndex>=total-1){
        makeAllPlays()
        songIndex=0
    }
    else{
        songItemPlay = document.getElementById(songIndex)
        makePlay(songItemPlay)
        songIndex +=1
    }
    songItemPlay = document.getElementById(songIndex)
    makePause(songItemPlay)
    makePause(masterPlay)

    songInfo.innerText = songs[songIndex].songName
    audioElement.src = songs[songIndex].filePath
    audioElement.play()
    audioElement.currentTime=0
})

// search 

searchInput.addEventListener("input",(e)=>{
    const value = e.target.value.toLowerCase()
    songItems.forEach(song=>{
        const isVisible = song.getElementsByTagName('span')[0].innerText.toLowerCase().includes(value)
        song.classList.toggle('hide',!isVisible)
        
    })

})


// add new song 

newSng = document.getElementById('inp')

newSng.addEventListener('change',()=>{
    newFilePath = newSng.value
    console.log(newFilePath)
    newSng.name = newFilePath.split('\\').pop().split('/').pop().split('.')[0]
    

    
    songs.push({songName:newSng.name, filePath: newFilePath})
    console.log(songs)
    total+=1
    newDiv= document.createElement("div")   
    newDiv.setAttribute("class","songItem")
    newDiv.innerHTML = ` <img alt=${total} >
    <span class = "songName"></span>
    <span class="songlistplay"><span class="timeStamp"></span><i id = ${total-1} class="songItemPlay fa-regular fa-circle-play"></i> </span>`
    
    songItemContainer.append(newDiv)

    updtSng()
    
    
    console.log(newDiv)
    
    
})
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: antiquewhite;

}

nav{
    font-family: 'Roboto Condensed', sans-serif;
}

nav ul{
    display: flex;
    align-items: center;
    list-style: none;
    height: 9vh;    
    background-color:black ;
    color: white;
}

nav ul li{
    padding-left: 3vw;
}

.brand{
    padding-left: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bolder;
}

.brand img {
    width: 3vw;
    height: 5vh;
}

.container{
    min-height: 71vh;
    background-color: black;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    margin: 3vh auto;
    border-radius: 12px;
    width: 70%;
    background-image: url(./others/uwp2726170.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;

}

.bottom{
    position: sticky;
    height: 14vh;
    background-color: black;
    bottom:0;
    display: flex;
    align-items:center;
    justify-content: center;
    color: white;
    flex-direction: column;
}

.icons{
    margin-top:1.5vh ;
}

.icons i{
    cursor: pointer;
}

#myProgressBar{
    width: 80vw;
    cursor: pointer;
    /* margin-top: 0px;
    margin-bottom: 5px; */
}

.songItem{
    display: flex;
    height: 6vh;
    width: 25vw;
    margin: 1.5vh 2vw;
    justify-content: space-around;
    align-items: center;
    border-color: whitesmoke;
    border-style: ridge;
    border-radius: 34px;
    border-width:0.2px ;
}

.songItem:hover{
    background-color: #e2a3e8;
    color: black;
}

.songItem img{
    width: 3vw;
    border-radius: 26px;
}

.timeStamp{
    margin: 0 0.5vw
}

.songList{
    padding: 2vh;
    text-align: center;
}

.songlistplay i{
    cursor: pointer;
}

.songItemContainer{
    margin-top: 8vh;
}

.songInfo{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position:absolute;
    left: 10vw;
}

.songInfo img{
    width: 3vw;
}

.songInfo img{
    opacity: 0;
    transition: opacity 0.8s ease-in;
}


/* .search-wrapper{
    display: flex;
    flex-direction: column;
} */

#search {
    font-size: 1rem;
    margin: 2vh 4vw;
    padding: 16px;
    border-radius: 8px;
    height: 6vh;
    width: 20vw;
    background: none;
    color: white;
    border-color: white;
    border-width: 4px;
    
}

::placeholder{
    color: white;
    opacity: 1;
}

.hide{
    display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li class="brand"><img src="./others/logo.png" alt="Spotify">Spotify</li>
            <li>Home</li>
            <li>About</li>
        </ul>
    </nav>
    
    <div class="container">
        
        <div class="songList">
            <h1>Best of NCS</h1>
            <div class="songItemContainer" id = "songItemContainer">
                <div class="songItem">
                    <img alt="1" >
                    <span class = "songName"></span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "0" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
                <div class="songItem">
                    <img alt="2" >
                    <span class = "songName"></span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "1" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
                <div class="songItem">
                    <img alt="3" >
                    <span class = "songName"></span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "2" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
                <div class="songItem">
                    <img alt="4" >
                    <span class = "songName"></span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "3" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
                <div class="songItem">
                    <img   alt="5" >
                    <span class = "songName"></span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "4" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
                <div class="songItem">
                    <img alt="6" >
                    <span class = "songName">r</span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "5" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
                <div class="songItem">
                    <img alt="7" height="44px" width="44px" >
                    <span class = "songName"></span>
                    <span class="songlistplay"><span class="timeStamp"></span><i id = "6" class="songItemPlay fa-regular fa-circle-play"></i> </span>
                </div>
            </div>

        </div>
        <div class="songBanner"></div>
        <div class="add"><input type="file" name="" id="inp" ></div>
        <div class="search-wrapper">
            <!-- <label for="search">Search Users</label> -->
            <input type="search" id ="search" placeholder="Seach here....." data-search>
        </div>
    </div>
    
    <div class="bottom">
        <input type="range" name="range" id="myProgressBar" min ='0' max = "100" value="0">
        <div class="icons">
            <!-- fontawesome icons  -->
            <i class="fa-solid fa-3x fa-backward-step" id="previous"></i>      
            <i class="fa-regular fa-3x fa-circle-play" id="masterPlay"></i>    
            <i class="fa-solid fa-3x fa-forward-step" id="next"></i>      
        </div>
        <div   class="songInfo">
            <img src="./others/playing.gif" id="gif" alt="">  <p id="songInfo"></p>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script src="https://kit.fontawesome.com/d76649665f.js" crossorigin="anonymous"></script>
</body>
</html>
VISHESH GUPTA
  • 13
  • 2
  • hi. This is the security implementation in browser, the browser is protecting you from accessing your disk or file paths. – Ehs4n Sep 28 '22 at 13:53

1 Answers1

0

If i understand correctly what you are trying to do, there is a problem. This will run in the browser, but the browser has no access to the computer files, so you cannot use newFilePath = newSng.value to link to that path.

there are several similar questions here on stack overflow, like for instance this one

I think you best option would be to use the File API, which allows you to read the content of the file. You can then use this to play the file, instead of a path to the file itself.

Here there are some example on how to do it.

Beware! Allowing users to upload files into your application may lead to security issues!

Boguz
  • 1,600
  • 1
  • 12
  • 25