<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YT Music SaaS</title> <link rel="stylesheet" href="styles.css"> <script src="app.js" defer></script> </head> <body> <div class="container"> <div class="player"> <div class="album-art" id="current-album"></div> <div class="player-controls"> <button id="prev"><</button> <button id="play-pause">></button> <button id="next">>></button> </div> <div class="progress-container"> <div class="progress-bar" id="progress"></div> </div> </div> <div class="library"> <div class="album-grid" id="album-grid"></div> </div> </div>  <iframe id="yt-player" style="display: none;"></iframe> </body> </html> .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .player { background: #181818; padding: 20px; border-radius: 8px; margin-bottom: 30px; } .album-art { width: 200px; height: 200px; background: #333; margin: 0 auto 20px; border-radius: 8px; overflow: hidden; } .player-controls { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } button { background: #1db954; border: none; padding: 15px 25px; border-radius: 50%; cursor: pointer; color: white; font-size: 18px; } button:hover { background: #1ed760; } .progress-container { background: #404040; height: 4px; border-radius: 2px; margin: 10px 0; } .progress-bar { height: 100%; background: #1db954; width: 0%; transition: width 0.1s linear; } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .album-card { background: #282828; padding: 15px; border-radius: 8px; cursor: pointer; transition: background 0.3s ease; } .album-card:hover { background: #383838; } .album-image { width: 100%; height: 180px; background: #333; border-radius: 4px; margin-bottom: 10px; } .album-title { color: white; font-weight: bold; margin-bottom: 5px; } .album-artist { color: #b3b3b3; font-size: 0.9em; } class YTPlayer { constructor() { this.player = null; this.currentTrack = 0; this.playlist = [ { id: '5qap5aO4i9A', title: 'Lofi Hip Hop Radio', artist: 'ChilledCow' }, { id: 'MCkTebktHVc', title: 'Jazz Vibes', artist: 'Coffee Shop Jazz' }, { id: '7NOSDKb0HlU', title: 'Classical Music', artist: 'Classical FM' } ]; this.initPlayer(); this.initControls(); this.renderLibrary(); } initPlayer() { const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.onYouTubeIframeAPIReady = () => { this.player = new YT.Player('yt-player', { height: '0', width: '0', events: { 'onReady': () => this.loadTrack(), 'onStateChange': (e) => this.handleStateChange(e) } }); }; } loadTrack() { this.player.loadVideoById(this.playlist[this.currentTrack].id); document.getElementById('current-album').style.backgroundImage = `url(https://img.youtube.com/vi/${this.playlist[this.currentTrack].id}/hqdefault.jpg)`; } handleStateChange(event) { if (event.data === YT.PlayerState.PLAYING) { this.updateProgress(); } } updateProgress() { const update = () => { const duration = this.player.getDuration(); const currentTime = this.player.getCurrentTime(); const progress = (currentTime / duration) * 100; document.getElementById('progress').style.width = `${progress}%`; if (this.player.getPlayerState() === YT.PlayerState.PLAYING) { requestAnimationFrame(update); } }; requestAnimationFrame(update); } initControls() { document.getElementById('play-pause').addEventListener('click', () => { this.togglePlay(); }); document.getElementById('next').addEventListener('click', () => { this.nextTrack(); }); document.getElementById('prev').addEventListener('click', () => { this.prevTrack(); }); document.querySelector('.progress-container').addEventListener('click', (e) => { const rect = e.target.getBoundingClientRect(); const percent = (e.clientX - rect.left) / rect.width; this.player.seekTo(this.player.getDuration() * percent); }); } togglePlay() { if (this.player.getPlayerState() === YT.PlayerState.PLAYING) { this.player.pauseVideo(); } else { this.player.playVideo(); } } nextTrack() { this.currentTrack = (this.currentTrack + 1) % this.playlist.length; this.loadTrack(); } prevTrack() { this.currentTrack = (this.currentTrack - 1 + this.playlist.length) % this.playlist.length; this.loadTrack(); } renderLibrary() { const grid = document.getElementById('album-grid'); this.playlist.forEach((track, index) => { const card = document.createElement('div'); card.className = 'album-card'; card.innerHTML = `

${track.title}

${track.artist}

`; card.addEventListener('click', () => { this.currentTrack = index; this.loadTrack(); this.player.playVideo(); }); grid.appendChild(card); }); } } // Initialize app window.addEventListener('DOMContentLoaded', () => { new YTPlayer(); });