diff --git a/audiplay.js b/audiplay.js index 509c468..634208b 100644 --- a/audiplay.js +++ b/audiplay.js @@ -1,151 +1,225 @@ -//Create Elements ... - -const ap_html = '
'; - - - -//Constants -let ap_audio = o('.audiplay'); -createcontainer(); -let play = o('.playpausebtn'); -let ap_loop = o('.ap_loop'); -let slider = document.querySelector('.duration_slider'); - -let track = o('.audiplay'); -let showtimer = o('.ap_time'); -let ap_time = ap_audio.currentTime; -let Playing_song = false; -let playing_time = ' '+secondsToMinutes(ap_audio.duration); - -let autoplay = false; -let loop = false; -function createcontainer() { - ap_audio.insertAdjacentHTML( 'Beforebegin' ,ap_html) - } - - - -//Mains - -ap_audio.style.display = "none"; -if(ap_audio.style.width!='') { - o('.ap_container').style.width = ap_audio.style.width ; +// Constants +const ap_playsvg = ` + + + +`; + +const ap_pausesvg = ` + + + + +`; + +const ap_loopsvg = ` +`; + +const ap_loopedsvg = ` + +`; + +let ap_downloadsvg = ` +`; + +const ap_soundsvg = ` +`; + +const ap_soundmutesvg = ` +`; +// HTML template for audio player +const ap_html = ` + +
+
+ ${ap_playsvg} + ${ap_loopsvg} + + + + + ${ap_downloadsvg} + ${ap_soundsvg} +
+
+`; + +// Get all audio elements with class 'audiplay' +const ap_audioElements = document.querySelectorAll('.audiplay'); + +// Insert the audio player before each audio element +ap_audioElements.forEach((audioElement, index) => { + audioElement.insertAdjacentHTML('beforebegin', ap_html); + createContainer(audioElement, index); +}); + +// Function to create container with appropriate class +function createContainer(audioElement, index) { + const apContainer = audioElement.previousElementSibling; + apContainer.classList.add(`ap_container_${index}`); + apContainer.querySelector('.playpausebtn').dataset.index = index; + apContainer.querySelector('.ap_loop').dataset.index = index; + apContainer.querySelector('.duration_slider').dataset.index = index; + apContainer.querySelector('.ap_time').dataset.index = index; + apContainer.querySelector('.ap_download').dataset.index = index; + apContainer.querySelector('.ap_sound').dataset.index = index; } -function range_slider() { - let position = 0; - showtime(); - // update slider position - if (!isNaN(track.duration)) { - position = track.currentTime * (100 / track.duration); - slider.value = position; +// Play-Pause function +function justplay(element) { + const index = element.dataset.index; + const audioElement = ap_audioElements[index]; + if (audioElement.paused) { + audioElement.play(); + element.innerHTML = ap_pausesvg; + } else { + audioElement.pause(); + element.innerHTML = ap_playsvg; } +} - - // function will run when the song is over - if (track.ended) { - play.innerHTML = ap_playsvg; - if (autoplay == 1) { - index_no += 1; - //load_track(index_no); - playsong(); - } - } +// Change duration function +function change_duration(element) { + const index = element.dataset.index; + const audioElement = ap_audioElements[index]; + const seekto = audioElement.duration * (element.value / 100); + audioElement.currentTime = seekto; } -function ap_mute() { - if (!ap_audio.muted) { - ap_audio.muted = 1; - o('.ap_sound').innerHTML = ap_mutesvg; +// Mute function +function ap_mute(element) { + const index = element.dataset.index; + const audioElement = ap_audioElements[index]; + if (!audioElement.muted) { + audioElement.muted = true; + element.innerHTML = ap_soundmutesvg; } else { - ap_audio.muted = 0; - o('.ap_sound').innerHTML = ap_volumnsvg; + audioElement.muted = false; + element.innerHTML = ap_soundsvg; } } -function ap_loopf() { - if(!ap_audio.loop){ - ap_audio.loop = true ; - o('.ap_loop').innerHTML = ap_loopedsvg ; +// Loop function +function ap_loopf(element) { + const index = element.dataset.index; + const audioElement = ap_audioElements[index]; + if (audioElement.loop) { + audioElement.loop = false; + element.innerHTML = ap_loopsvg; } else { - ap_audio.loop = false ; - o('.ap_loop').innerHTML = ap_loopsvg ; + audioElement.loop = true; + element.innerHTML = ap_loopedsvg; } } -//SVGs - -const ap_playsvg = ' '; -const ap_pausesvg = ' '; -const ap_loopsvg = ''; -const ap_loopedsvg = ' '; -const ap_downloadsvg = ' '; -const ap_volumnsvg = ' '; -const ap_mutesvg = ' '; - -//Inner Htmls -ap_loop.innerHTML = ap_loopsvg; -o('.ap_download').innerHTML = ap_downloadsvg; -play.innerHTML = ap_playsvg; -o('.ap_sound').innerHTML = ap_volumnsvg; - -// play song -function playsong() { - setInterval(function () { - range_slider() - }, 700); - track.play(); - Playing_song = true; - play.innerHTML = ap_pausesvg; -} - -//pause song -function pausesong() { - track.pause(); - Playing_song = false; - play.innerHTML = ap_playsvg; +// Event Listeners +ap_audioElements.forEach((audioElement, index) => { + audioElement.addEventListener('timeupdate', function() { + const progress = (audioElement.currentTime / audioElement.duration) * 100; + document.querySelector(`.ap_container_${index} .duration_slider`).value = progress; + showtime(audioElement, index); + }); + + audioElement.addEventListener('ended', function() { + document.querySelector(`.ap_container_${index} .playpausebtn`).innerHTML = ap_playsvg; + audioElement.currentTime = 0; + }); +}); + +// Function to display audio time +function showtime(audioElement, index) { + const current = audioElement.currentTime; + const duration = audioElement.duration; + const minutes = Math.floor(current / 60); + const seconds = Math.floor(current - minutes * 60); + const duration_minutes = Math.floor(duration / 60); + const duration_seconds = Math.floor(duration - duration_minutes * 60); + let time = minutes + ":" + (seconds < 10 ? "0" + seconds : seconds) + " / " + duration_minutes + ":" + (duration_seconds < 10 ? "0" + duration_seconds : duration_seconds); + document.querySelector(`.ap_container_${index} .ap_time`).innerHTML = time; +} + +// Function to download audio +function ap_download(element) { + const index = element.dataset.index; + const audioElement = ap_audioElements[index]; + const audioSrc = audioElement.src; + const link = document.createElement('a'); + link.href = audioSrc; + link.download = 'audio'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); }