diff --git a/index.html b/index.html new file mode 100644 index 0000000..29cab0e --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + +
+
+ +
+
🖊️ by OverSu & 🙌 Sekedus
+
\ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..3434b00 --- /dev/null +++ b/script.js @@ -0,0 +1,388 @@ +/* +Example: https://setstori.blogspot.com/2016/01/nightmareside.html +*/ + + + + +// Multiple events to a listener +function addEventListener_multi(element, eventNames, handler) { + var events = eventNames.split(' '); + events.forEach(e => element.addEventListener(e, handler, false)); +} + +// Random numbers in a specific range +function getRandom(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +// Position element inside element +function getRelativePos(elm) { + var pPos = elm.parentNode.getBoundingClientRect(); // parent pos + var cPos = elm.getBoundingClientRect(); // target pos + var pos = {}; + + pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop, + pos.right = cPos.right - pPos.right, + pos.bottom = cPos.bottom - pPos.bottom, + pos.left = cPos.left - pPos.left; + + return pos; +} + +function formatTime(val) { + var h = 0, m = 0, s; + val = parseInt(val, 10); + if (val > 60 * 60) { + h = parseInt(val / (60 * 60), 10); + val -= h * 60 * 60; + } + if (val > 60) { + m = parseInt(val / 60, 10); + val -= m * 60; + } + s = val; + val = (h > 0)? h + ':' : ''; + val += (m > 0)? ((m < 10 && h > 0)? '0' : '') + m + ':' : '0:'; + val += ((s < 10)? '0' : '') + s; + return val; +} + +function simp_initTime() { + simp_controls.querySelector('.start-time').innerHTML = formatTime(simp_audio.currentTime); //calculate current value time + if (!simp_isStream) { + simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration); //calculate total value time + simp_progress.value = simp_audio.currentTime / simp_audio.duration * 100; //progress bar + } + + // ended of the audio + if (simp_audio.currentTime == simp_audio.duration) { + simp_controls.querySelector('.simp-plause').classList.remove('fa-pause'); + simp_controls.querySelector('.simp-plause').classList.add('fa-play'); + simp_audio.removeEventListener('timeupdate', simp_initTime); + + if (simp_isNext) { //auto load next audio + var elem; + simp_a_index++; + if (simp_a_index == simp_a_url.length) { //repeat all audio + simp_a_index = 0; + elem = simp_a_url[0]; + } else { + elem = simp_a_url[simp_a_index]; + } + simp_changeAudio(elem); + simp_setAlbum(simp_a_index); + } else { + simp_isPlaying = false; + } + } +} + +function simp_initAudio() { + // if readyState more than 2, audio file has loaded + simp_isLoaded = simp_audio.readyState == 4 ? true : false; + simp_isStream = simp_audio.duration == 'Infinity' ? true : false; + simp_controls.querySelector('.simp-plause').disabled = false; + simp_progress.disabled = simp_isStream ? true : false; + if (!simp_isStream) { + simp_progress.parentNode.classList.remove('simp-load', 'simp-loading'); + simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration); + } + simp_audio.addEventListener('timeupdate', simp_initTime); //tracking load progress + if (simp_isLoaded && simp_isPlaying) simp_audio.play(); + + // progress bar click event + addEventListener_multi(simp_progress, 'touchstart mousedown', function (e) { + if (simp_isStream) { + e.stopPropagation(); + return false; + } + if (simp_audio.readyState == 4) { + simp_audio.removeEventListener('timeupdate', simp_initTime); + simp_audio.pause(); + } + }); + + addEventListener_multi(simp_progress, 'touchend mouseup', function (e) { + if (simp_isStream) { + e.stopPropagation(); + return false; + } + if (simp_audio.readyState == 4) { + simp_audio.currentTime = simp_progress.value * simp_audio.duration / 100; + simp_audio.addEventListener('timeupdate', simp_initTime); + if (simp_isPlaying) simp_audio.play(); + } + }); + + // Ajout du gestionnaire d'événements pour passer à la piste suivante + simp_audio.addEventListener('ended', playNextTrack); +} + +function playNextTrack() { + simp_a_index++; + if (simp_a_index >= simp_a_url.length) { + simp_a_index = 0; // Répéter la playlist depuis le début + } + // Charger la piste suivante + simp_changeAudio(simp_a_url[simp_a_index]); + simp_setAlbum(simp_a_index); + // Rejouer la piste suivante + simp_audio.play(); + simp_isPlaying = true; + simp_controls.querySelector('.simp-plause').classList.remove('fa-play'); + simp_controls.querySelector('.simp-plause').classList.add('fa-pause'); +} + +function simp_changeAudio(elem) { + simp_isLoaded = false; + simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false; + simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false; + simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length - 1 ? true : false; + simp_progress.parentNode.classList.add('simp-load'); + simp_progress.disabled = true; + simp_progress.value = 0; + simp_controls.querySelector('.start-time').innerHTML = '00:00'; + simp_controls.querySelector('.end-time').innerHTML = '00:00'; + elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length - 1)] : elem; + + // playlist, audio is running + for (var i = 0; i < simp_a_url.length; i++) { + simp_a_url[i].parentNode.classList.remove('simp-active'); + if (simp_a_url[i] == elem) { + simp_a_index = i; + simp_a_url[i].parentNode.classList.add('simp-active'); + } + } + + // scrolling to element inside element + var simp_active = getRelativePos(simp_source[simp_a_index]); + simp_source[simp_a_index].parentNode.scrollTop = simp_active.top; + + // Charger le nouvel élément audio + simp_loadAudio(elem); + + if (simp_isPlaying) { + simp_controls.querySelector('.simp-plause').classList.remove('fa-play'); + simp_controls.querySelector('.simp-plause').classList.add('fa-pause'); + } +} + + + +function simp_loadAudio(elem) { + simp_progress.parentNode.classList.add('simp-loading'); + simp_controls.querySelector('.simp-plause').disabled = true; + simp_audio.querySelector('source').src = elem.dataset.src; + simp_audio.load(); + + simp_audio.volume = parseFloat(simp_v_num / 100); //based on valume input value + simp_audio.addEventListener('canplaythrough', simp_initAudio); //play audio without stop for buffering + + // if audio fails to load, only IE/Edge 9.0 or above + simp_audio.addEventListener('error', function() { + alert('Please reload the page.'); + }); +} + +function simp_setAlbum(index) { + simp_cover.innerHTML = simp_a_url[index].dataset.cover ? '
' : ''; + simp_title.innerHTML = simp_source[index].querySelector('.simp-source').innerHTML; + simp_artist.innerHTML = simp_source[index].querySelector('.simp-desc') ? simp_source[index].querySelector('.simp-desc').innerHTML : ''; +} + +function simp_changeAudio(elem) { + simp_isLoaded = false; + simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false; + simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false; + simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length-1 ? true : false; + simp_progress.parentNode.classList.add('simp-load'); + simp_progress.disabled = true; + simp_progress.value = 0; + simp_controls.querySelector('.start-time').innerHTML = '00:00'; + simp_controls.querySelector('.end-time').innerHTML = '00:00'; + elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length-1)] : elem; + + // playlist, audio is running + for (var i = 0; i < simp_a_url.length; i++) { + simp_a_url[i].parentNode.classList.remove('simp-active'); + if (simp_a_url[i] == elem) { + simp_a_index = i; + simp_a_url[i].parentNode.classList.add('simp-active'); + } + } + + // scrolling to element inside element + var simp_active = getRelativePos(simp_source[simp_a_index]); + simp_source[simp_a_index].parentNode.scrollTop = simp_active.top; + + if (simp_auto_load || simp_isPlaying) simp_loadAudio(elem); + + if (simp_isPlaying) { + simp_controls.querySelector('.simp-plause').classList.remove('fa-play'); + simp_controls.querySelector('.simp-plause').classList.add('fa-pause'); + } +} + +function simp_startScript() { + ap_simp = document.querySelector('#simp'); + simp_audio = ap_simp.querySelector('#audio'); + simp_album = ap_simp.querySelector('.simp-album'); + simp_cover = simp_album.querySelector('.simp-cover'); + simp_title = simp_album.querySelector('.simp-title'); + simp_artist = simp_album.querySelector('.simp-artist'); + simp_controls = ap_simp.querySelector('.simp-controls'); + simp_progress = simp_controls.querySelector('.simp-progress'); + simp_volume = simp_controls.querySelector('.simp-volume'); + simp_v_slider = simp_volume.querySelector('.simp-v-slider'); + simp_v_num = simp_v_slider.value; //default volume + simp_others = simp_controls.querySelector('.simp-others'); + simp_auto_load = simp_config.auto_load; //auto load audio file + + if (simp_config.shide_top) simp_album.parentNode.classList.toggle('simp-hide'); + if (simp_config.shide_btm) { + simp_playlist.classList.add('simp-display'); + simp_playlist.classList.toggle('simp-hide'); + } + + if (simp_a_url.length <= 1) { + simp_controls.querySelector('.simp-prev').style.display = 'none'; + simp_controls.querySelector('.simp-next').style.display = 'none'; + simp_others.querySelector('.simp-plext').style.display = 'none'; + simp_others.querySelector('.simp-random').style.display = 'none'; + } + + // Playlist listeners + simp_source.forEach(function(item, index) { + if (item.classList.contains('simp-active')) simp_a_index = index; //playlist contains '.simp-active' + item.addEventListener('click', function() { + simp_audio.removeEventListener('timeupdate', simp_initTime); + simp_a_index = index; + simp_changeAudio(this.querySelector('.simp-source')); + simp_setAlbum(simp_a_index); + }); + }); + + // FIRST AUDIO LOAD ======= + simp_changeAudio(simp_a_url[simp_a_index]); + simp_setAlbum(simp_a_index); + // FIRST AUDIO LOAD ======= + + // Controls listeners + simp_controls.querySelector('.simp-plauseward').addEventListener('click', function(e) { + var eles = e.target.classList; + if (eles.contains('simp-plause')) { + if (simp_audio.paused) { + if (!simp_isLoaded) simp_loadAudio(simp_a_url[simp_a_index]); + simp_audio.play(); + simp_isPlaying = true; + eles.remove('fa-play'); + eles.add('fa-pause'); + } else { + simp_audio.pause(); + simp_isPlaying = false; + eles.remove('fa-pause'); + eles.add('fa-play'); + } + } else { + if (eles.contains('simp-prev') && simp_a_index != 0) { + simp_a_index = simp_a_index-1; + e.target.disabled = simp_a_index == 0 ? true : false; + } else if (eles.contains('simp-next') && simp_a_index != simp_a_url.length-1) { + simp_a_index = simp_a_index+1; + e.target.disabled = simp_a_index == simp_a_url.length-1 ? true : false; + } + simp_audio.removeEventListener('timeupdate', simp_initTime); + simp_changeAudio(simp_a_url[simp_a_index]); + simp_setAlbum(simp_a_index); + } + }); + + // Audio volume + simp_volume.addEventListener('click', function(e) { + var eles = e.target.classList; + if (eles.contains('simp-mute')) { + if (eles.contains('fa-volume-up')) { + eles.remove('fa-volume-up'); + eles.add('fa-volume-off'); + simp_v_slider.value = 0; + } else { + eles.remove('fa-volume-off'); + eles.add('fa-volume-up'); + simp_v_slider.value = simp_v_num; + } + } else { + simp_v_num = simp_v_slider.value; + if (simp_v_num != 0) { + simp_controls.querySelector('.simp-mute').classList.remove('fa-volume-off'); + simp_controls.querySelector('.simp-mute').classList.add('fa-volume-up'); + } + } + simp_audio.volume = parseFloat(simp_v_slider.value / 100); + }); + + // Others + simp_others.addEventListener('click', function(e) { + var eles = e.target.classList; + if (eles.contains('simp-plext')) { + simp_isNext = simp_isNext && !simp_isRandom ? false : true; + if (!simp_isRandom) simp_isRanext = simp_isRanext ? false : true; + eles.contains('simp-active') && !simp_isRandom ? eles.remove('simp-active') : eles.add('simp-active'); + } else if (eles.contains('simp-random')) { + simp_isRandom = simp_isRandom ? false : true; + if (simp_isNext && !simp_isRanext) { + simp_isNext = false; + simp_others.querySelector('.simp-plext').classList.remove('simp-active'); + } else { + simp_isNext = true; + simp_others.querySelector('.simp-plext').classList.add('simp-active'); + } + eles.contains('simp-active') ? eles.remove('simp-active') : eles.add('simp-active'); + } else if (eles.contains('simp-shide-top')) { + simp_album.parentNode.classList.toggle('simp-hide'); + } else if (eles.contains('simp-shide-bottom')) { + simp_playlist.classList.add('simp-display'); + simp_playlist.classList.toggle('simp-hide'); + } + }); +} + +// Start simple player +if (document.querySelector('#simp')) { + var simp_auto_load, simp_audio, simp_album, simp_cover, simp_title, simp_artist, simp_controls, simp_progress, simp_volume, simp_v_slider, simp_v_num, simp_others; + var ap_simp = document.querySelector('#simp'); + var simp_playlist = ap_simp.querySelector('.simp-playlist'); + var simp_source = simp_playlist.querySelectorAll('li'); + var simp_a_url = simp_playlist.querySelectorAll('[data-src]'); + var simp_a_index = 0; + var simp_isPlaying = false; + var simp_isNext = false; //auto play + var simp_isRandom = false; //play random + var simp_isRanext = false; //check if before random starts, simp_isNext value is true + var simp_isStream = false; //radio streaming + var simp_isLoaded = false; //audio file has loaded + var simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : { + shide_top: false, //show/hide album + shide_btm: false, //show/hide playlist + auto_load: false //auto load audio file + }; + + var simp_elem = ''; + simp_elem += ''; + simp_elem += '
Title
Artist
'; + simp_elem += '
'; + simp_elem += '
'; + simp_elem += '
'; + simp_elem += '
00:00 / 00:00
'; + simp_elem += '
'; + simp_elem += '
'; + simp_elem += '
'; //simp-controls + + var simp_player = document.createElement('div'); + simp_player.classList.add('simp-player'); + simp_player.innerHTML = simp_elem; + ap_simp.insertBefore(simp_player, simp_playlist); + simp_startScript(); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a44ab4c --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); + +*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;} +input,button{outline:none;} +a,a:hover,a:visited{color:#ddd;text-decoration:none;} +.flex{display:-webkit-flex;display:flex;} +.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;} +.flex-align{-webkit-align-items:center;align-items:center;} +.w-full{width:100%;} + +/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */ +#simp button,#simp input,#simp img{border:0;} +#simp{max-width:600px;font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;} +#simp .simp-album{padding:20px 25px 5px;} +#simp .simp-album .simp-cover{margin-right:20px;} +#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;} +#simp .simp-album .simp-title{font-size:120%;font-weight:bold;} +#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;} +#simp .simp-controls{padding:15px;} +#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;} +#simp .simp-controls button[disabled]{color:#636469;cursor:initial;} +#simp .simp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;} +#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;} +#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;} +#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;} +#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;} +#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;} +#simp .simp-controls .simp-volume{max-width:110px;} +#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;} +#simp .simp-controls .simp-others .simp-active{background:#242f3d;} +#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;} +#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;} +#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;} +#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;} +#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;} +#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;} +#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);} +#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);} +#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);} +#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);} +#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;} +#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;} +#simp .simp-hide{max-height:0;} +/* playlist */ +#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;} +#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;} +#simp ul li:last-child{padding-bottom:13px;} +#simp ul li:nth-child(odd){background:#0e1621;} +#simp ul li:hover{background:#242f3d;} +#simp ul li.simp-active{background:#4082bc;color:#fff;} +#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;} +/* playlist scrollbar */ +#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;} +#simp ul::-webkit-scrollbar-track{background-color:#2f3841;} +#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;} +#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;} +/* progress animation */ +@-webkit-keyframes audio-progress{to{background-position:25px 0;}} +@keyframes audio-progress{to{background-position:25px 0;}} +/* mobile */ +@media screen and (max-width:480px) { +#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;} +#simp .simp-controls .simp-time{margin-right:10px;} +} +@media screen and (max-width:370px) { +#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;} +} \ No newline at end of file