Welcome to Help center

We are here to help

Audio player

Follow

audioplayer2.jpg

HTML:

        <div class="audio-wrapper">
            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <div id="jp_container_1" class="jp-audio">
                <div class="jp-type-single">
                    <div class="jp-gui jp-interface">
                        <div class="jp-controls">
                            <a href="javascript:;" class="jp-play" tabindex="1">
                            <i class="fa fa-play" aria-hidden="true"></i></a>
                            <a href="javascript:;" class="jp-pause" tabindex="1">
                            <i class="fa fa-pause" aria-hidden="true"></i></a>

                            <div class="jp-progress">
                                <div class="jp-seek-bar">
                                    <div class="jp-play-bar"></div>
                                </div>
                            </div>

                            <div class="time-wrapper">
                                <div class="jp-time-holder">
                                    <div class="jp-current-time"></div>
                                </div>
                                <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">
                                <i class="fa fa-volume-up" aria-hidden="true"></i></a>
                                <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">
                                <i class="fa fa-volume-off" aria-hidden="true"></i></a>
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    

Before </body> tag ends:

        <script type="text/javascript" src="assets/js/jquery.jplayer.min.js"></script>
        <script type="text/javascript" src="assets/js/main.js"></script>
    

Initialize audio player in main.js file

        if ($("#jquery_jplayer_1").length > 0) {
            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                 $(this).jPlayer("setMedia", {
                      mp3: "assets/audio/your-song.mp3",
                      wav: "assets/audio/your-song.wav"
                 });
                },
                swfPath: "assets/js",
                supplied: "mp3, wav"
            });
        }
    
Top
Powered by Zendesk