آمار وب سایت:  

بازدید امروز : 1
بازدید دیروز : 0
بازدید هفته : 1
بازدید ماه : 1
بازدید کل : 225
تعداد مطالب : 1
تعداد نظرات : 0
تعداد آنلاین : 1

Music Player

برای استفاده از آیکون ها و زیباتر سازی برنامه از fontawesome استفاده می کنیم: در ادامه به یک نگهدارنده یا کانتینر اصلی نیاز داریم. این نگهدارنده یک تگ div با کلاس music-container است. اجزای اصلی برنامه در این قسمت قرار می گیرند و همان طور که قبلا هم گفتیم این تگ یک نگهدارنده است. به چندین تگ دیگر نیز نیاز داریم. این تگ ها در زیر آمده اند: یک تگ div برای نشان دادن اطلاعات آهنگ با کلاس music-info یک تگ audio برای پخش آهنگ یک تگ div برای نشان دادن تصویر با کلاس img-container یک تگ div برای نشان دادن دکمه های مختلف برای کار کردن با آهنگ ها با کلاس navigation const musicContainer = document.getElementById('music-container'); const playBtn = document.getElementById('play'); const prevBtn = document.getElementById('prev'); const nextBtn = document.getElementById('next'); const audio = document.getElementById('audio'); const progress = document.getElementById('progress'); const progressContainer = document.getElementById('progress-container'); const title = document.getElementById('title'); const cover = document.getElementById('cover'); // Song titles const songs = ['hey', 'summer', 'ukulele']; // Keep track of song let songIndex = 2; // Initially load song details into DOM loadSong(songs[songIndex]); // Update song details function loadSong(song) { title.innerText = song; audio.src = `music/${song}.mp3`; cover.src = `images/${song}.jpg`; }