app.js

$("#freePlayerPlayBtn").on('click',function(){
  kemMediaPlayer.initMedia(src,$("#freePlayerPlayBtn"),$("#freePlayerVolumeBar"),$("#freePlayerSeekeBar"),$("#freePlayerTotalDurationDisplay"),$("#freePlayerPlayedDurationDisplay"));
});

$("#fullPlayerPlayBtn").on('click',function(){
  kemMediaPlayer.initMedia(src,$("#fullPlayerVolumeBar"),$("#fullPlayerVolumeBar"),$("#fullPlayerSeekeBar"),$("#fullPlayerTotalDurationDisplay"),$("#fullPlayerPlayedDurationDisplay"));
});

index.html

<button id="freePlayerPlayBtn" class="listen-live-btn play-btn off">
        TAP TO PLAY
</button>
<input id="freePlayerVolumeBar" class="volume-slider"  type="range" min="0" max="1" value="0.5" step="0.1">
<input id="freePlayerSeekeBar" class="time-slider" type="range" min="0" max="100" value="50" step="0.1">
<label  id="freePlayerTotalDurationDisplay" class="media-played left-text text-color-for-neon">-</label> 
<label id="freePlayerPlayedDurationDisplay" class="media-duration right-text text-color-for-neon">-</label>


<button id="fullPlayerPlayBtn" class="listen-live-btn play-btn off">
        TAP TO PLAY
</button>
<input id="fullPlayerVolumeBar" class="volume-slider"  type="range" min="0" max="1" value="0.5" step="0.1">
<input id="fullPlayerSeekeBar" class="time-slider" type="range" min="0" max="100" value="50" step="0.1">
<label  id="fullPlayerTotalDurationDisplay" class="media-played left-text text-color-for-neon">-</label> 
<label id="fullPlayerPlayedDurationDisplay" class="media-duration right-text text-color-for-neon">-</label>

player.js

/* global MyApp, Utility, MediaBridge */
var kemMediaPlayer = {
    media: null,
    mediaTimer: null,
    isPlaying: false,
    isSeeking: false,
    playBtn: null,
    volumeBar: null,
    seekBar: null,
    totalDurationDisplay: null,
    playedDurationDisplay: null,
    initMedia: function (path, $btn, $voumeBar, $seekBar, $total, $played) {
        kemMediaPlayer.playBtn = $btn || null;
        kemMediaPlayer.volumeBar = $voumeBar || null;
        kemMediaPlayer.seekBar = $seekBar || null;
        kemMediaPlayer.totalDurationDisplay = $total || null;
        kemMediaPlayer.playedDurationDisplay = $played || null;

        try {

            if (kemMediaPlayer.media && kemMediaPlayer.isPlaying) {
                kemMediaPlayer.stop();
            }

            kemMediaPlayer.media = new Media(
                    path,
                    function () {
                        console.log('Media file read succesfully');
                        if (kemMediaPlayer.media !== null)
                            kemMediaPlayer.media.release();
                        kemMediaPlayer.resetLayout();
                    },
                    function (error) {
                        MyApp.fw7.app.alert(
                                'Unable to read the media file.',
                                'Media error',
                                function () {
                                    // MyApp.fw7.views[0].router.back();
                                }
                        );
                        kemMediaPlayer.changePlayButton('play');
                        console.log('Unable to read the media file (Code): ' + error.code);
                    }, function (status) {

                if (status === 1) {
                    kemMediaPlayer.changePlayButton('buffer');
                } else if (status === 2) {
                    kemMediaPlayer.changePlayButton('pause');
                } else {
                    kemMediaPlayer.changePlayButton('play');
                }
                console.log('Media Status changed :-' + status);
            }
            );

            
            if(kemMediaPlayer.volumeBar){
                $(kemMediaPlayer.volumeBar).on('change input', function (e) {
                    if (kemMediaPlayer.media) {
                        kemMediaPlayer.media.setVolume($(this).val());
                    }
                });
            }
            
            if(kemMediaPlayer.seekBar){
                $(kemMediaPlayer.seekBar).on('touchstart mousedown', function (e) {
                    kemMediaPlayer.isSeeking = true;
                });
                $(kemMediaPlayer.seekBar).on('change input', function (e) {
                    kemMediaPlayer.seekPosition($(this).val());
                });
                $(kemMediaPlayer.seekBar).on('touchend mouseup', function (e) {
                    kemMediaPlayer.isSeeking = false;
                });
            }

        } catch (e) {
            console.log(e);
        }

    },
    playPause: function (path) {
        if (kemMediaPlayer.media === null)
            kemMediaPlayer.initMedia(path);

        if (kemMediaPlayer.isPlaying === false)
        {
            kemMediaPlayer.media.play();
            var lastPosition = 0;
            kemMediaPlayer.mediaTimer = setInterval(
                    function () {
                        kemMediaPlayer.media.getCurrentPosition(
                                function (position) {
                                    if (position > -1)
                                    {
                                        kemMediaPlayer.playedDurationDisplay && $(kemMediaPlayer.playedDurationDisplay).text(Utility.formatTime(position));
                                        // if not seeking
                                        if (!kemMediaPlayer.isSeeking)
                                            kemMediaPlayer.updateSliderPosition(position);

                                        //to indicate buffering status
                                        if (position === lastPosition || ((position - lastPosition) < 0.50)) {
                                            window.isLocal && console.log("Position " + position + " - LastPosition " + lastPosition + "=" + (position - lastPosition));
                                            kemMediaPlayer.changePlayButton('buffer');
                                        } else {
                                            kemMediaPlayer.changePlayButton('pause');
                                        }

                                        lastPosition = position;

                                    }
                                },
                                function (error) {
                                    console.log('Unable to retrieve media position: ' + error.code);
                                   kemMediaPlayer.playedDurationDisplay && $(kemMediaPlayer.playedDurationDisplay).text(Utility.formatTime(0));
                                }
                        );
                    },
                    1000
                    );
            var counter = 0;
            var timerDuration = setInterval(
                    function () {
                        counter++;
                        if (counter > 20)
                            clearInterval(timerDuration);

                        var duration = kemMediaPlayer.media.getDuration();
                        if (duration > -1)
                        {
                            clearInterval(timerDuration);
                           kemMediaPlayer.totalDurationDisplay && $(kemMediaPlayer.totalDurationDisplay).text(Utility.formatTime(duration));
                           kemMediaPlayer.seekBar && $(kemMediaPlayer.seekBar).attr('max', Math.round(duration));
                        } else
                            kemMediaPlayer.totalDurationDisplay && $(kemMediaPlayer.totalDurationDisplay).text('Unknown');
                    },
                    1000
                    );

            kemMediaPlayer.changePlayButton('pause');
        } else
        {
            kemMediaPlayer.media.pause();
            clearInterval(kemMediaPlayer.mediaTimer);
            kemMediaPlayer.changePlayButton('play');
        }
        kemMediaPlayer.isPlaying = !kemMediaPlayer.isPlaying;
    },
    stop: function () {
        if (kemMediaPlayer.media !== null)
        {
            kemMediaPlayer.media.stop();
            kemMediaPlayer.media.release();
        }
        clearInterval(kemMediaPlayer.mediaTimer);
        kemMediaPlayer.media = null;
        kemMediaPlayer.isPlaying = false;
        kemMediaPlayer.resetLayout();
    },
    resetLayout: function () {
        kemMediaPlayer.playedDurationDisplay && $(kemMediaPlayer.playedDurationDisplay).text(Utility.formatTime(0));
        kemMediaPlayer.totalDurationDisplay && $(kemMediaPlayer.totalDurationDisplay).text(Utility.formatTime(0));
        kemMediaPlayer.changePlayButton('play');
        kemMediaPlayer.updateSliderPosition(0);
    },
    updateSliderPosition: function (seconds) {
        
        if(kemMediaPlayer.seekBar===null){
            return false;
        }
        
        var $slider = kemMediaPlayer.seekBar;

        if (seconds < $slider.attr('min'))
            $slider.val($slider.attr('min'));
        else if (seconds > $slider.attr('max'))
            $slider.val($slider.attr('max'));
        else
            $slider.val(Math.round(seconds));
    },
    seekPosition: function (seconds) {
        if (kemMediaPlayer.media === null)
            return;

        kemMediaPlayer.media.seekTo(seconds * 1000);
        kemMediaPlayer.updateSliderPosition(seconds);
    },
    changePlayButton: function (imageName) {
        switch (imageName) {
            case 'play':
                $(kemMediaPlayer.playBtn).addClass('off').removeClass('on').removeClass('loading').text('TAP TO PLAY');
                break;
            case 'pause':
                $(kemMediaPlayer.playBtn).addClass('on').removeClass('off').removeClass('loading').text('TAP TO PAUSE');
                break
            case 'buffer':
                $(kemMediaPlayer.playBtn).addClass('loading').removeClass('off').removeClass('on').text('BUFFERING');
                break
        }

    }
};