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:

 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all" /><!-- scroll -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><!-- icons -->
<link rel="stylesheet" type="text/css" href="css/hap_playlist_selector.css" /><!-- main css file -->

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script><!-- playlist scroll -->
<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:

 <div id="hap-wrapper">

    <div class="hap-player-holder">
     
        <div class="ap-media-title-mask">
            <div class="ap-media-title">Artist Name - Song Title</div>
        </div>
          
        <p class="ap-media-time-total">0:00</p>
        <p class="ap-media-time-separator">/</p>
        <p class="ap-media-time-current">0:00</p>
     
        <div class="hap-player-controls">
            <div class="hap-prev-toggle hap-contr-btn"><i class="fa fa-step-backward hap-contr-btn-i hap-icon-color"></i></div>
            <div class="hap-playback-toggle hap-contr-btn"><i class="fa fa-play hap-contr-btn-i hap-icon-color"></i></div>
            <div class="hap-next-toggle hap-contr-btn"><i class="fa fa-step-forward hap-contr-btn-i hap-icon-color"></i></div>
              
            <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>
            <div class="hap-volume-seekbar hap-tooltip-item">
                 <div class="hap-volume-bg"></div>
                 <div class="hap-volume-level"></div>
            </div>

            <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>
            <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>
        </div>

        <div class="hap-seekbar-inner hap-tooltip-item">
            <div class="hap-progress-bg"></div>
            <div class="hap-load-level"></div>
            <div class="hap-progress-level"></div>
        </div>
          
    </div>
      
    <div class="hap-playlist-holder">
        <div class="hap-playlist-inner">
            <div class="hap-playlist-content"></div>
        </div>
    </div>

</div>

 

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

 <div id="hap-playlist-list">

     <ul id="playlist-audio1">
        <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>
     
        <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>
          
        <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>

        <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>

        <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>

        <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>

        <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>
     </ul>   

</div>

Activation

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)

 <script type="text/javascript">

    var hap_player; 
    jQuery(document).ready(function($) {
        
        var settings = {
            playlistList:"#hap-playlist-list",
            activePlaylist:"playlist-audio1",
            activeItem:0,
            volume:0.5,
            autoPlay:false,
            usePlaylistScroll:true,
            useNumbersInPlaylist: true
        };

        hap_player = $("#hap-wrapper").hap(settings);

    });

</script>

 

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

 



Find More related How to Install Audio Player with Playlist V2 PHP Script


Have any Question or Comment?

Leave a Reply

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