Does anyone know anything about HTML programming? I'm currently having trouble linking the animated bars when a music file is selected and played. Image may be NSFW.
Clik here to view.
!! The bars are freely generated and are independent of the audio track!!
Clik here to view.
!! The bars are freely generated and are independent of the audio track!!
Screenshot 2025-03-19 221440.png
mediaPlay-v.0.0.6.htmlCode:
<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media-Datei Player</title> <script src="https://cdn.jsdelivr.net/npm/jsmediatags@3.9.5/dist/jsmediatags.min.js"></script> <style> :root { --text-color: #007BCF; --text-color-selected-File: #FFFFFF; --background-color: #f7f7f7; --border-color: #ddd; --item-border-color: #007BCF; --scaling-factor: 0.81; } body { font-family: Arial, sans-serif; margin: 0px; transform: scale(var(--scaling-factor)); position: absolute; top: 20px; left: 0px; } #coverImage { width: 282px; height: 210px; display: flex; justify-content: center; align-items: center; background-color: lightgray; color: var(--text-color); font-size: 65px; border-radius: 10px; margin-bottom: 16.2px; position: absolute; top: 0px; left: 35px; } #mediaPlayer { display: none; width: 282px; height: auto; position: absolute; top: 0px; left: 35px; } .file-input-container { display: flex; justify-content: center; margin-bottom: 16.2px; position: absolute; top: 220px; left: 35px; } .file-input-container label { cursor: pointer; background-color: var(--text-color); color: white; padding: 8.1px 12.15px; border: none; border-radius: 4.05px; } #magnetLinkButton { margin-left: 25px; background-color: var(--text-color); color: white; padding: 8.1px 12.15px; border: none; border-radius: 4.05px; cursor: pointer; left: 80px;width: 155px;font-size: 16px; } .playlist-container { width: 278px; max-height: 324px; position: absolute; top: 280px; left: 35px; overflow-y: auto; margin-top: 8.1px; background-color: var(--background-color); border: 1px solid var(--border-color); display: none; padding: 1px; border-radius: 4.0px; } .playlist-item { padding: 8.1px; margin-bottom: 8.1px; cursor: pointer; font-size: 12px; border: 1px solid var(--item-border-color); border-radius: 4.05px; background-color: white; box-shadow: 0 1.62px 4.05px rgba(0, 0, 0, 0.1); display: flex; align-items: center; transition: background-color 0.2s, box-shadow 0.2s; } .playlist-item:hover { background-color: rgba(0, 123, 207, 0.1); box-shadow: 0 3.24px 6.48px rgba(0, 0, 0, 0.2); } .playlist-item.active { background-color: rgba(0, 123, 207, 0.2); border: 1.62px solid var(--item-border-color); } .play-icon { margin-right: 8.1px; font-size: 11.34px; color: var(--text-color); visibility: hidden; } .playlist-item.active .play-icon { visibility: visible; } #selectedFileLabel { position: absolute; top: 150px; left: 40px; width: 278px; font-size: 14px; color: var(--text-color-selected-File); }.bars { display: flex; /* Bars are hidden*/ position: absolute; top: 55px; left: 80px; gap: 5px; } .bar { width: 10px; height: 20px; background-color: #4CAF50; transform-origin: bottom; /* Animation nach oben */ animation: moveUp 1s infinite; } @keyframes moveUp { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1.5); } } /* Unterschiedliche Animationen für jede Bar */ .bar:nth-child(1) { animation: moveUp 0.8s infinite; } .bar:nth-child(2) { animation: moveUp 1.2s infinite; } .bar:nth-child(3) { animation: moveUp 0.6s infinite; } .bar:nth-child(4) { animation: moveUp 1.0s infinite; } .bar:nth-child(5) { animation: moveUp 1.4s infinite; }.bar:nth-child(6) { animation: moveUp 0.8s infinite; } .bar:nth-child(7) { animation: moveUp 1.2s infinite; } .bar:nth-child(8) { animation: moveUp 0.6s infinite; } .bar:nth-child(9) { animation: moveUp 1.0s infinite; } .bar:nth-child(10) { animation: moveUp 1.4s infinite; }.bar:nth-child(11) { animation: moveUp 0.6s infinite; } .bar:nth-child(12) { animation: moveUp 1.0s infinite; } .bar:nth-child(13) { animation: moveUp 1.4s infinite; } </style></head><body> <div id="coverImage">🎵</div> <video id="mediaPlayer" controls></video> <div class="file-input-container"> <label for="fileInput">🎵 Datei auswählen</label> <input type="file" id="fileInput" accept=".m3u,audio/*,video/*" style="display: none;"> <button id="magnetLinkButton">🔗 Magnetlink</button> </div> <div id="selectedFileLabel"></div> <div class="playlist-container" id="playlistContainer"></div> <script> const translations = { de: { title: "Media-Datei Player", chooseFile: "🎵 Datei auswählen" }, en: { title: "Media File Player", chooseFile: "🎵 Choose File" } }; const userLang = (navigator.language || navigator.userLanguage).substring(0, 2); const lang = translations[userLang] || translations["en"]; document.title = lang.title; document.querySelector("label[for='fileInput']").textContent = lang.chooseFile; const fileInput = document.getElementById('fileInput'); const mediaPlayer = document.getElementById('mediaPlayer'); const coverImage = document.getElementById('coverImage'); const playlistContainer = document.getElementById('playlistContainer'); const magnetLinkButton = document.getElementById('magnetLinkButton'); const selectedFileLabel = document.getElementById('selectedFileLabel'); let playlist = []; let currentIndex = -1; magnetLinkButton.addEventListener('click', () => { const magnetLink = prompt('Bitte geben Sie den Magnetlink ein:'); if (magnetLink) { alert(`Magnetlink hinzugefügt: ${magnetLink}`); } }); const parseM3U = (content) => { const lines = content.split(/\r?\n/); const items = []; let title = ''; lines.forEach(line => { if (line.startsWith('#EXTINF:')) { title = line.split(',')[1] || `Track ${items.length + 1}`; } else if (line.trim() && !line.startsWith('#')) { items.push({ title: title, url: line }); title = ''; } }); return items; }; const renderPlaylist = () => { playlistContainer.innerHTML = ''; playlist.forEach((item, idx) => { const div = document.createElement('div'); div.className = 'playlist-item'; div.innerHTML = `<span class="play-icon">▶</span>${item.title}`; div.addEventListener('click', () => playTrack(idx)); playlistContainer.appendChild(div); }); playlistContainer.style.display = 'block'; }; const playTrack = (idx) => { currentIndex = idx; const track = playlist[idx]; mediaPlayer.src = track.url; mediaPlayer.play().catch(err => console.error('Fehler:', err)); coverImage.style.display = 'none'; mediaPlayer.style.display = 'block'; document.querySelectorAll('.playlist-item').forEach((item, i) => { item.classList.toggle('active', i === idx); }); }; mediaPlayer.addEventListener('ended', () => { if (currentIndex + 1 < playlist.length) { playTrack(currentIndex + 1); } else { location.reload(); } }); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { // Entferne die Dateiendung const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, ""); // Setze den bereinigten Dateinamen in das Label selectedFileLabel.textContent = `${fileNameWithoutExtension}`; if (file.name.endsWith('.m3u')) { const reader = new FileReader(); reader.onload = (e) => { playlist = parseM3U(e.target.result); renderPlaylist(); }; reader.readAsText(file); } else { const url = URL.createObjectURL(file); mediaPlayer.src = url; coverImage.style.display = "none"; mediaPlayer.style.display = "block"; playlistContainer.style.display = "none"; mediaPlayer.play().catch(err => console.error('Fehler beim Abspielen:', err)); } }}); </script> <div class="bars"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div><div class="bar"></div> <div class="bar"></div><div class="bar"></div> <div class="bar"></div><div class="bar"></div> <div class="bar"></div><div class="bar"></div> <div class="bar"></div> </div></body></html>Statistics: Posted by Rooky_89 — Yesterday, 8:17 pm
