Stylish HTML5 Audio Player Using Media Elements.js (Integration)

Author: Masud Rana

Publish: 4:56 PM

Stylish HTML5 Audio Player Using Media Elements.js (Integration)

#Demo

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
         <link rel="stylesheet" href="css/mejs-site.css">

        <!-- fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,300i">
          
      
</head>
<body>
  
  
    <div class="players">
      <center>  <audio id="player2" preload="none" controls style="width: 80%;">
            <source src="https://docs.google.com/uc?export=download&id=1EuQLRDqo1Z2qOIqBapkbOJMaoPgq9Jmh" type="audio/mp3">                    </audio>  </center> 
    </div> 
  
  

        <!-- library -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelementplayer.min.css">    

<style type="text/css">
.vue-slider-process,.vue-slider-dot{transition:none !important
}
.vue-slider{cursor:pointer
}
.vue-slider-dot-tooltip{display:none !important
}
.vue-slider-dot{background:black !important;border-radius:50%;box-shadow:none;height:12px !important;width:12px !important
}
.vue-slider-dot-handle{background:transparent !important;box-shadow:none
}
.vue-slider-rail{background:#f2f2f2 !important
}
.vue-slider-process{background:black !important
}
.vue-slider{height:2px !important
}
</style>
  


        <!-- JS -->
        <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelement-and-player.min.js"></script>

 <script>

            var
                sourcesSelector = document.body.querySelectorAll('select'),
		        sourcesTotal = sourcesSelector.length
            ;

            for (var i = 0; i < sourcesTotal; i++) {
                sourcesSelector[i].addEventListener('change', function (e) {
                    var
                        media = e.target.closest('.media-container').querySelector('.mejs__container').id,
                        player = mejs.players[media]
                    ;

                    player.setSrc(e.target.value.replace('&amp;', '&'));
                    player.setPoster('');
                    player.load();

                });

                // These media types cannot play at all on iOS, so disabling them
                if (mejs.Features.isiOS) {
			        if (sourcesSelector[i].querySelector('option[value^="rtmp"]')) {
                        sourcesSelector[i].querySelector('option[value^="rtmp"]').disabled = true;
                    }
                    if (sourcesSelector[i].querySelector('option[value$="webm"]')) {
                        sourcesSelector[i].querySelector('option[value$="webm"]').disabled = true;
                    }
                    if (sourcesSelector[i].querySelector('option[value$=".mpd"]')) {
                        sourcesSelector[i].querySelector('option[value$=".mpd"]').disabled = true;
                    }
			        if (sourcesSelector[i].querySelector('option[value$=".ogg"]')) {
                        sourcesSelector[i].querySelector('option[value$=".ogg"]').disabled = true;
                    }
			        if (sourcesSelector[i].querySelector('option[value$=".flv"]')) {
                        sourcesSelector[i].querySelector('option[value*=".flv"]').disabled = true;
        		    }
                }
            }

            document.addEventListener('DOMContentLoaded', function() {
                var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;

                for (var i = 0; i < total; i++) {
                    new MediaElementPlayer(mediaElements[i], {
                        pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/',
                        shimScriptAccess: 'always',
                        success: function () {
                            var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
                            for (var j = 0; j < targetTotal; j++) {
                                target[j].style.visibility = 'visible';
                            }
			            }
		            });
                }
            });
        </script>    


</body>
</html>

custom audio player,audio player,learn html5 audio player,html5 audio player,audio player using css,audio player using css and javascript,html5 audio,customize audio player,player,custom audio player in js,audio player in js,html css only audio player,audio,html audio,html audio tag,html5 audio playerintroduction,html audio player,html5 audio api,html5 media player,javascript audio player,css audio player tutorial,stylish html5 audio player

ads1

পরিচিতদেরকে জানাতে শেয়ার করুন

ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।

ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

ডোমেইন চেকার এই লিংকে চাপ দিন ।

আপনার জন্য আরো কিছু পোস্ট

Copyright © Masud Computer BD™ - All Right Reserved.