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

data:label.name author of Masud Computer BDAuthor: Masud Rana
Publish: 4:56 PM
  1. Stylish HTML5 Audio Player Using Media Elements.js (Integration)

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>

Also read : Mini Music Player

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

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

Newer post Older post
ads1

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

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

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

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

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

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

Tags:
Reaction
2 Comment Emoticon
2 comments
Sorted by

RELATED ARTICLES

ads3

Copyright © 2025 Masud Computer BD™ - All Right Reserved.