llevent 
MP3 Şarkılarınızı bilgisayarınızdan seçtiğiniz klasörden sırasıyla çalar.
<!DOCTYPE html>
<html lang=”tr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Gösterişli Müzik Çalar</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
background-color: #282c34;
color: white;
font-family: Arial, sans-serif;
}
#musicList {
flex: 1;
max-width: 300px;
padding: 20px;
text-align: center;
}
#musicPlayer {
flex: 1;
text-align: center;
}
audio {
width: 100%;
margin-top: 20px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
cursor: pointer;
transition: color 0.3s;
}
li:hover {
color: #61dafb;
}
#currentMusic {
margin-top: 20px;
}
#buttonContainer {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
#nextButton,
#prevButton,
#nextPlaylistButton,
#prevPlaylistButton,
#selectFolderButton {
background-color: #61dafb;
color: white;
padding: 10px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
margin: 0 10px;
}
#nextButton:hover,
#prevButton:hover,
#nextPlaylistButton:hover,
#prevPlaylistButton:hover,
#selectFolderButton:hover {
background-color: #45a5f5;
}
#totalRecords {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
#recordCount {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#katman2,
#katman3 {
display: none;
}
@media only screen and (min-width: 600px) {
#katman2,
#katman3 {
display: block;
}
}
</style>
</head>
<body>
<div id=”musicList”>
</div>
<div id=”musicPlayer”>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
var totalRecords = document.getElementById(‘totalRecords’);
var recordCount = document.getElementById(‘recordCount’);
var playlist = document.getElementById(‘playlist’);
var audioPlayer = document.getElementById(‘audioPlayer’);
var currentMusicIndex = 0;
var currentMusicElement = document.getElementById(‘currentMusic’);
var nextButton = document.getElementById(‘nextButton’);
var prevButton = document.getElementById(‘prevButton’);
var nextPlaylistButton = document.getElementById(‘nextPlaylistButton’);
var prevPlaylistButton = document.getElementById(‘prevPlaylistButton’);
var selectFolderButton = document.getElementById(‘selectFolderButton’);
var currentPage = 0;
var recordsPerPage = 10;
var files = [];
selectFolderButton.addEventListener(‘click’, function () {
var input = document.createElement(‘input’);
input.type = ‘file’;
input.setAttribute(‘directory’, true);
input.setAttribute(‘webkitdirectory’, true);
input.setAttribute(‘mozdirectory’, true);
input.setAttribute(‘msdirectory’, true);
input.setAttribute(‘odirectory’, true);
input.setAttribute(‘nwdirectory’, true);
input.addEventListener(‘change’, function (event) {
files = Array.from(event.target.files).map(file => file);
playlist.innerHTML = ”;
files.slice(currentPage * recordsPerPage, (currentPage + 1) * recordsPerPage).forEach(function (file, index) {
var listItem = document.createElement(‘li’);
listItem.textContent = file.name;
listItem.addEventListener(‘click’, function () {
playMusic(index);
});
playlist.appendChild(listItem);
});
if (files.length > 0) {
playMusic(0);
}
});
document.body.appendChild(input);
input.click();
document.body.removeChild(input);
});
function playMusic(index) {
audioPlayer.src = URL.createObjectURL(files[index]);
audioPlayer.load();
audioPlayer.play();
currentMusicIndex = index;
updateCurrentMusic();
}
function updateCurrentMusic() {
var listItems = playlist.getElementsByTagName(‘li’);
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.color = ”;
}
var currentListItem = playlist.getElementsByTagName(‘li’)[currentMusicIndex – currentPage * recordsPerPage];
if (currentListItem) {
currentListItem.style.color = ‘#61dafb’;
}
currentMusicElement.textContent = ‘Çalan Müzik: ‘ + files[currentMusicIndex].name;
}
audioPlayer.addEventListener(‘timeupdate’, function () {
if (audioPlayer.currentTime >= audioPlayer.duration – 1) {
playNextMusic();
}
});
nextButton.addEventListener(‘click’, function () {
playNextMusic();
});
prevButton.addEventListener(‘click’, function () {
playPrevMusic();
});
nextPlaylistButton.addEventListener(‘click’, function () {
currentPage = (currentPage + 1) % Math.ceil(files.length / recordsPerPage);
displayPlaylist();
});
prevPlaylistButton.addEventListener(‘click’, function () {
currentPage = (currentPage – 1 + Math.ceil(files.length / recordsPerPage)) % Math.ceil(files.length / recordsPerPage);
displayPlaylist();
});
function playNextMusic() {
currentMusicIndex = (currentMusicIndex + 1) % files.length;
playMusic(currentMusicIndex);
}
function playPrevMusic() {
currentMusicIndex = (currentMusicIndex – 1 + files.length) % files.length;
playMusic(currentMusicIndex);
}
function displayPlaylist() {
var start = currentPage * recordsPerPage;
var end = start + recordsPerPage;
var currentList = files.slice(start, end);
playlist.innerHTML = ”;
currentList.forEach(function (file, index) {
var listItem = document.createElement(‘li’);
listItem.textContent = file.name;
listItem.addEventListener(‘click’, function () {
playMusic(index + start);
});
playlist.appendChild(listItem);
});
updateCurrentMusic();
updateRecordCount();
}
function updateRecordCount() {
totalRecords.textContent = ‘Toplam Kayıt Sayısı: ‘ + files.length;
recordCount.textContent = (currentPage * recordsPerPage + 1) + ‘ – ‘ + Math.min((currentPage + 1) * recordsPerPage, files.length) + ‘ / ‘ + files.length;
}
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === ‘childList’ && mutation.addedNodes.length > 0) {
document.getElementById(‘katman3’).style.display = ‘block’;
}
});
});
observer.observe(playlist, { childList: true });
document.getElementById(‘katman3’).style.display = ‘none’;
});
</script>
<table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<audio controls id=”audioPlayer”></audio>
<div id=”currentMusic”>
<p align=”center”></div>
<div id=”buttonContainer”>
<div style=”position: absolute; width: 174px; height: 150px; z-index: 1; left: 99px; top: 136px” id=”katman1″>
<img border=”0″ src=”mp3.png” width=”200″ height=”202″></div>
<p align=”center”>
<button id=”prevButton” style=”color: white; cursor: pointer; transition: background-color 0.3s; border: medium none; margin: 0 10px; padding: 10px; background-color: #61dafb”>
Geri</button>
<button id=”nextButton” style=”color: white; cursor: pointer; transition: background-color 0.3s; border: medium none; margin: 0 10px; padding: 10px; background-color: #61dafb”>
İleri</button>
</div>
</td>
</tr>
<tr>
<td>
<h1 align=”center”>Müzik Listesi</h1>
<p id=”totalRecords” align=”center”>Toplam Kayıt Sayısı:</p>
<p id=”recordCount” align=”center”></p>
<ul id=”playlist”></ul>
<div id=”buttonContainer”>
<p align=”center”>
<button id=”prevPlaylistButton” style=”color: white; cursor: pointer; transition: background-color 0.3s; border: medium none; margin: 0 10px; padding: 10px; background-color: #61dafb”>
Önceki Liste</button>
<button id=”nextPlaylistButton” style=”color: white; cursor: pointer; transition: background-color 0.3s; border: medium none; margin: 0 10px; padding: 10px; background-color: #61dafb”>
Sonraki Liste</button>
<button id=”selectFolderButton” style=”color: white; cursor: pointer; transition: background-color 0.3s; border: medium none; margin: 0 10px; padding: 10px; background-color: #61dafb”>
Klasör Seç</button>
</div>
<p> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div style=”position: absolute; width: 307px; height: 210px; z-index: 3; left: 502px; top: 336px” id=”katman3″>
<img border=”0″ src=”kaset.gif” width=”355″ height=”209″></div>
<div style=”position: absolute; width: 380px; height: 428px; z-index: 2; left: 854px; top: 154px” id=”katman2″>
<img border=”0″ src=”mp3_sag.png” width=”447″ height=”469″></div>
</body>
</html>
