Google Ad

How to Install Audio Player with Playlist V2 PHP Script

How to Install Audio Player with Playlist V2 PHP Script

How to Install

< head > setup

Include the following javascript and css code into HEA section of the page:

  1. <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all" /><!-- scroll -->
  2. <link rel="stylesheet" href=""><!-- icons -->
  3. <link rel="stylesheet" type="text/css" href="css/hap_playlist_selector.css" /><!-- main css file -->
  4. <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script><!-- playlist scroll -->
  6. <script type="text/javascript" src="js/new.js"></script><!-- main plugin javascript -->


< body > setup

Create HTML markup for the player into BODY section of the page:

  1. <div id="hap-wrapper">
  2. <div class="hap-player-holder">
  3. <div class="ap-media-title-mask">
  4. <div class="ap-media-title">Artist Name - Song Title</div>
  5. </div>
  6. <p class="ap-media-time-total">0:00</p>
  7. <p class="ap-media-time-separator">/</p>
  8. <p class="ap-media-time-current">0:00</p>
  9. <div class="hap-player-controls">
  10. <div class="hap-prev-toggle hap-contr-btn"><i class="fa fa-step-backward hap-contr-btn-i hap-icon-color"></i></div>
  11. <div class="hap-playback-toggle hap-contr-btn"><i class="fa fa-play hap-contr-btn-i hap-icon-color"></i></div>
  12. <div class="hap-next-toggle hap-contr-btn"><i class="fa fa-step-forward hap-contr-btn-i hap-icon-color"></i></div>
  13. <div class="hap-player-volume hap-toggle-mute hap-contr-btn"><i class="fa fa-volume-up hap-contr-btn-i hap-icon-color"></i></div>
  14. <div class="hap-volume-seekbar hap-tooltip-item">
  15. <div class="hap-volume-bg"></div>
  16. <div class="hap-volume-level"></div>
  17. </div>
  18. <div class="hap-loop-toggle hap-contr-btn hap-tooltip-item" data-tooltip="Loop"><i class="fa fa-refresh hap-contr-btn-i hap-icon-color"></i></div>
  19. <div class="hap-random-toggle hap-contr-btn hap-tooltip-item" data-tooltip="Shuffle"><i class="fa fa-random hap-contr-btn-i hap-icon-color"></i></div>
  20. </div>
  21. <div class="hap-seekbar-inner hap-tooltip-item">
  22. <div class="hap-progress-bg"></div>
  23. <div class="hap-load-level"></div>
  24. <div class="hap-progress-level"></div>
  25. </div>
  26. </div>
  27. <div class="hap-playlist-holder">
  28. <div class="hap-playlist-inner">
  29. <div class="hap-playlist-content"></div>
  30. </div>
  31. </div>
  32. </div>


Include playlist which is going to be loaded into BODY section of the page.
Audio playlist example:

  1. <div id="hap-playlist-list">
  2. <ul id="playlist-audio1">
  3. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/04.mp3" data-artist="Tim McMorris" data-title="Happy Days Are Here To Stay"></li>
  4. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/01.mp3" data-artist="Tim McMorris" data-title="A Bright And Hopeful Future"></li>
  5. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/03.mp3" data-artist="Tim McMorris" data-title="Give Our Dreams Their Wings To Fly"></li>
  6. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/06.mp3" data-artist="Tim McMorris" data-title="Marketing Advertising Music"></li>
  7. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/07.mp3" data-artist="Tim McMorris" data-title="Successful Business Venture"></li>
  8. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/05.mp3" data-artist="Tim McMorris" data-title="Health Happiness Success"></li>
  9. <li class="hap-playlist-item" data-type="audio" data-mp3="../mp3-dir/audio1main/02.mp3" data-artist="Tim McMorris" data-title="Be My Valentine"></li>
  10. </ul>
  11. </div>


Activate the plugin once the document is ready by placing this into HEAD section of the page:
Note: player needs to be activated AFTER the parent html container in which player is placed has been made visible in css! (display:block for example)

  1. <script type="text/javascript">
  2. var hap_player;
  3. jQuery(document).ready(function($) {
  4. var settings = {
  5. playlistList:"#hap-playlist-list",
  6. activePlaylist:"playlist-audio1",
  7. activeItem:0,
  8. volume:0.5,
  9. autoPlay:false,
  10. usePlaylistScroll:true,
  11. useNumbersInPlaylist: true
  12. };
  13. hap_player = $("#hap-wrapper").hap(settings);
  14. });
  15. </script>


More settings are available, these are just some basic ones.


Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *