Playlist Music App

by SonicBear35

140 lines1.9 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playlist Music App</title>
<style>
body{
margin:0;
font-family:Arial;
background:#111;
color:white;
text-align:center;
}

h1{margin:15px;}

input{
margin:10px;
color:white;
}

audio{
width:90%;
margin:10px 0;
}

button{
padding:10px;
margin:5px;
border:none;
border-radius:10px;
background:#00c2ff;
color:white;
}

#list{
margin-top:10px;
padding:10px;
}

.song{
background:#222;
margin:8px;
padding:12px;
border-radius:10px;
cursor:pointer;
text-align:left;
}

.song:hover{
background:#333;
}

.active{
background:#00c2ff;
color:black;
}
</style>
</head>
<body>

<h1>🎵 My Playlist</h1>

<input type="file" id="fileInput" accept="audio/*" multiple>

<br>

<button onclick="playPrev()">⏮ Prev</button>
<button onclick="playNext()">⏭ Next</button>

<audio id="player" controls></audio>

<div id="list"></div>

<script>
const fileInput = document.getElementById("fileInput");
const player = document.getElementById("player");
const list = document.getElementById("list");

let songs = [];
let current = 0;

fileInput.onchange = function(){
let newFiles = Array.from(fileInput.files);

// add new songs to playlist
songs = songs.concat(newFiles);

render();
};

function render(){
list.innerHTML = "";

songs.forEach((song, i)=>{
let div = document.createElement("div");
div.className = "song";

if(i === current){
div.classList.add("active");
}

div.innerHTML = "🎵 " + song.name;

div.onclick = ()=>{
play(i);
};

list.appendChild(div);
});
}

function play(i){
current = i;

let url = URL.createObjectURL(songs[i]);
player.src = url;
player.play();

render();
}

function playNext(){
if(current + 1 < songs.length){
play(current + 1);
}
}

function playPrev(){
if(current - 1 >= 0){
play(current - 1);
}
}

player.onended = playNext;
</script>

</body>
</html>

Game Source: Playlist Music App

Creator: SonicBear35

Libraries: none

Complexity: moderate (140 lines, 1.9 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: playlist-music-app-sonicbear35" to link back to the original. Then publish at arcadelab.ai/publish.