Skip to content

Commit

Permalink
- remove equalizer and feature that saves playlist in the localstorage
Browse files Browse the repository at this point in the history
  • Loading branch information
TobiasMue91 committed Aug 31, 2024
1 parent ac0d2c3 commit 2573f9e
Showing 1 changed file with 3 additions and 76 deletions.
79 changes: 3 additions & 76 deletions tools/online_music_player.html
Original file line number Diff line number Diff line change
Expand Up @@ -117,35 +117,6 @@
padding: 20px;
text-align: center;
}

.eq-slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}

.eq-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}

.eq-slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body class="flex flex-col md:flex-row h-screen bg-gray-100 dark:bg-gray-800 dark:text-white font-sans">
Expand Down Expand Up @@ -203,14 +174,6 @@ <h2 class="text-2xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Add to
<p>Drag and drop audio files here</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-4 md:p-6 max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Equalizer</h2>
<div id="equalizer" class="flex justify-between">
<input type="range" min="-10" max="10" value="0" class="eq-slider" id="lowEQ">
<input type="range" min="-10" max="10" value="0" class="eq-slider" id="midEQ">
<input type="range" min="-10" max="10" value="0" class="eq-slider" id="highEQ">
</div>
</div>
</main>
<div id="loader"
class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50 hidden">
Expand All @@ -237,34 +200,19 @@ <h2 class="text-2xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Equaliz
const clearPlaylist = document.getElementById('clearPlaylist');
const dropZone = document.getElementById('dropZone');
const loader = document.getElementById('loader');
const lowEQ = document.getElementById('lowEQ');
const midEQ = document.getElementById('midEQ');
const highEQ = document.getElementById('highEQ');
let songs = JSON.parse(localStorage.getItem('playlist')) || [];
let songs = [];
let currentSongIndex = 0;
let isShuffled = false;
let isRepeating = false;
let audioContext;
let analyser;
let lowpass;
let bandpass;
let highpass;

function initAudioContext() {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
lowpass = audioContext.createBiquadFilter();
bandpass = audioContext.createBiquadFilter();
highpass = audioContext.createBiquadFilter();
lowpass.type = "lowshelf";
bandpass.type = "peaking";
highpass.type = "highshelf";
source.connect(lowpass);
lowpass.connect(bandpass);
bandpass.connect(highpass);
highpass.connect(analyser);
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 256;
}
Expand Down Expand Up @@ -293,21 +241,14 @@ <h2 class="text-2xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Equaliz
li.appendChild(removeBtn);
playlist.appendChild(li);
});
savePlaylist();
}

async function playSong(index) {
try {
currentSongIndex = index;
const song = songs[index];
showLoader();
if (song.file instanceof File) {
audio.src = URL.createObjectURL(song.file);
} else {
const response = await fetch(song.url);
const blob = await response.blob();
audio.src = URL.createObjectURL(blob);
}
audio.src = URL.createObjectURL(song.file);
await audio.play();
playPause.innerHTML = '<i class="fas fa-pause"></i>';
nowPlaying.textContent = `Now Playing: ${song.name}`;
Expand Down Expand Up @@ -499,10 +440,6 @@ <h2 class="text-2xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Equaliz
alert(message);
}

function savePlaylist() {
localStorage.setItem('playlist', JSON.stringify(songs.map(s => ({name: s.name, url: s.url}))));
}

function addSongsToPlaylist(files) {
for (let i = 0; i < files.length; i++) {
const file = files[i];
Expand Down Expand Up @@ -532,16 +469,6 @@ <h2 class="text-2xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Equaliz
const files = e.dataTransfer.files;
addSongsToPlaylist(files);
};
lowEQ.oninput = () => {
if (lowpass) lowpass.gain.setValueAtTime(lowEQ.value, audioContext.currentTime);
};
midEQ.oninput = () => {
if (bandpass) bandpass.gain.setValueAtTime(midEQ.value, audioContext.currentTime);
};
highEQ.oninput = () => {
if (highpass) highpass.gain.setValueAtTime(highEQ.value, audioContext.currentTime);
};
updatePlaylist();
</script>
</body>
</html>

0 comments on commit 2573f9e

Please sign in to comment.