2023 January 21 Archive - EXEIdeas – Let's Your Mind Rock

This code snippet helps you to create a JavaScript audio player with a playlist. It comes with custom controls including volume progress, play/pause, next/previous, shuffles, and autoplay buttons. Likewise, users can expand and collapse the player and playlist.The player is purely built with JavaScript without any dependency. However, it uses Font Awesome CSS for icons. If we talk about its customization, Sekedus provide us with an easy way to control the overall behavior of the player. You can pass the configuration object through the HTML5 data attribute/data config. On the other hand, the interface of the audio player can be customized with additional CSS.There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.CLICK HERE TO SEE DEMOFeatures:Light Weight.Pure JavaScript.Cross Browser.No JQuery Files.Fully Customizable.Responsive.How To Add JavaScript Audio Waveform Visualizer Player With Pure Vanilla JavaScript?There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly. @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://www.codehim.com/vanilla-javascript/javascript-audio-player-with-playlist/ */#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;}} HTML: Canon in D Johann Pachelbel Artist 5 Nightmare Side Set Stori Angklung Preman Pensiun Canon Rock (JerryC) by Funtwo 105.9 FM Ardan Radio Streaming Radio Jailhouse Rock Elvis Presley Smooth Criminal Michael Jackson Y.M.C.A Village People Johnny B. Goode Chuck Berry House of the Rising Sun The Animals Don't Stop Me Now Queen Never Gonna Give You Up Rick Astley Sweet Child O' Mine Guns N' Roses The Final Countdown Europe My Heart Will Go On Céline Dion Imagine John Lennon Hey Jude The Beatles Take Me Home, Country Roads John Denver JavaScript: /*Example: https://www.codehim.com/demo/javascript-audio-player-with-playlist/*/// Multiple events to a listenerfunction addEventListener_multi(element, eventNames, handler) {var events = eventNames.split(' ');events.forEach(e => element.addEventListener(e, handler, false));}// Random numbers in a specific rangefunction getRandom(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;}// Position element inside elementfunction getRelativePos(elm) {var pPos = elm.parentNode.getBoundingClientRect(); // parent posvar cPos = elm.getBoundingClientRect(); // target posvar 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 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 timeif (!simp_isStream) {simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration); //calculate total value timesimp_progress.value = simp_audio.currentTime / simp_audio.duration * 100; //progress bar}// ended of the audioif (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 audiovar elem;simp_a_index++;if (simp_a_index == simp_a_url.length) { //repeat all audiosimp_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 loadedsimp_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 progressif (simp_isLoaded && simp_isPlaying) simp_audio.play();// progress bar click eventaddEventListener_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();}});}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 valuesimp_audio.addEventListener('canplaythrough', simp_initAudio); //play audio without stop for buffering// if audio fails to load, only IE/Edge 9.0 or abovesimp_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 runningfor (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 elementvar 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 volumesimp_others = simp_controls.querySelector('.simp-others');simp_auto_load = simp_config.auto_load; //auto load audio fileif (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 listenerssimp_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 listenerssimp_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 volumesimp_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);});// Otherssimp_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 playerif (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 playvar simp_isRandom = false; //play randomvar simp_isRanext = false; //check if before random starts, simp_isNext value is truevar simp_isStream = false; //radio streamingvar simp_isLoaded = false; //audio file has loadedvar simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : {shide_top: false, //show/hide albumshide_btm: false, //show/hide playlistauto_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-controlsvar 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();} Customization:No need to customize it. Just copy-paste. Rest edit the code as per comments and need.Troubleshooting the Errors:Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.Final Words:That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.