basic-player.html

<h1><a href="https://github.com/franok/oTplayer">oTplayer</a> Basic Player (offline)</h1>

<!-- <p>Here's some URLs to try out:</p>
<input class="example-url" value="http://ejb.github.io/progressor.js/demos/echoplex.mp3">
<input class="example-url" value="https://www.youtube.com/watch?v=nkBQpoaDhF4">
<input class="example-url" value="http://ejb.github.io/progressor.js/demos/physics.mp4"> -->
<div id="recent-tracks">
</div>

<!-- <p><label>Enter URL of MP3, MP4 or YouTube here: &nbsp;&nbsp;<input id="url-input" size="60"></label><p> -->
<p>
    <label>Enter URL of MP3, MP4 or YouTube here: &nbsp;&nbsp;<input id="url-input" size="60"></label>
    <button onclick="loadTrack();">Load</button>
<p>

<div id="media"></div>

<div class="controls">

    <div id="player-hook"></div>
    <div id="player-time"></div>

    <button class="playPause">&#9654;/&#9208;</button>
    &nbsp;&nbsp;
    <button class="play">Play &#9654;</button>
    <button class="pause">Pause &#9208;</button>
    &nbsp;&nbsp;
    <button class="back">&#9664;&#9664; Back (D)</button>
    <button class="forward">Forward (F) &#9654;&#9654;</button>
    &nbsp;&nbsp;
    <button class="speed-down">Speed down <span style="font-size: 16px;">&#11247;</span></button>
    <button class="speed-up">Speed up <span style="font-size: 16px;">&#11245;</span></button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="reset" style="background-color:red; color:white;">Reset Player</button>
    <div class="current-speed"></div>
</div>

<script src="./dependencies/jquery-1.11.1.min.js"></script>
<script src="./dependencies/progressor.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../dist/otplayer.js" type="text/javascript" charset="utf-8"></script>
<script>

    var opts = {
        container: $('#media')[0],
        skipTime: 1.5,
        startpoint: 0,
        buttons: {
            playPause: '.playPause'
        },
        onReady: function (e) {
            $('.controls').show();
        }
    }

    $(document).ready(function () {
        initWebApp();
        $("#url-input").focus();
    });

    $('#url-input').on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            loadTrack();
        }
    });

    // causes problems
    // $("body").keydown(function(e) {
    //     if(e.keyCode == 32 && $(this).val().indexOf(' ') >= 0){
    //         // if spacebar already pressed
    //         return false;
    //     }
    //     if(e.keyCode == 32) { // spacebar
    //     $( ".playPause" ).trigger( "click" );
    //   }
    // });

    $('.play').click(function () {
        player.play();
    });

    $('.pause').click(function () {
        player.pause();
    });

    $('.back').click(function () {
        player.skip('back');
    });

    $("body").keydown(function (e) {
        if (e.keyCode == 37 || e.keyCode == 68) { // left || d
            player.skip('back');
        }
    });

    $('.forward').click(function () {
        player.skip('forward');
    });

    $("body").keydown(function (e) {
        if (e.keyCode == 39 || e.keyCode == 70) { // right || f
            player.skip('forward');
        }
    });

    $('.speed-up').click(function () {
        player.speed('up');
    });
    $('.speed-down').click(function () {
        player.speed('down');
    });
    $('.reset').click(function () {
        player.reset();
        $('.controls').hide();
        $('#url-input').val('');
    });

    setInterval(function () {
        if (window.player) {
            $('.current-speed').text('Speed: ' + window.player.getSpeed() + 'x');
        }
    }, 50);

    function loadTrack(trackUri) {
        if (window.player) {
            window.player.reset();
        }
        trackUri = !trackUri ? $('#url-input').val() : trackUri;
        storeTrackUri(trackUri);
        opts.source = trackUri;
        if (window.player) { window.player.reset(); }
        window.player = new oTplayer(opts);
        $(".playPause").focus();
    }

    function initWebApp() {

        var ls = JSON.parse(localStorage.getItem('oTplayer-local'));

        //check if there exists any data in localStorage
        if (ls == null) { // don't do if(!oTplayer-local)
            localStorage.setItem('oTplayer-local', '{"last5Tracks": []}');
            return;
        }

        if (!ls.last5Tracks) {
            ls.last5Tracks = [];
        }
        localStorage.setItem('oTplayer-local', JSON.stringify(ls));
        displayLast5Tracks();
    }

    function storeTrackUri(trackUri) {
        if(trackUri === '') return;
        var ls = JSON.parse(localStorage.getItem('oTplayer-local'));
        if (trackUri.length && ls.last5Tracks && !ls.last5Tracks.some(obj => obj === trackUri)) {
            ls.last5Tracks.unshift(trackUri);
            while (ls.last5Tracks.length > 5) {
                ls.last5Tracks.pop();
            }
            localStorage.setItem('oTplayer-local', JSON.stringify(ls));
        } else { //reorder to the top, if already in the list
            let idx = ls.last5Tracks.findIndex(obj => obj === trackUri);
            ls.last5Tracks.splice(idx, 1);
            ls.last5Tracks.unshift(trackUri);
            localStorage.setItem('oTplayer-local', JSON.stringify(ls));
        }
        displayLast5Tracks();
    }

    function removeTrackUri(trackUri) {
        var ls = JSON.parse(localStorage.getItem('oTplayer-local'));
        if (trackUri.length && ls.last5Tracks) {
            let idx = ls.last5Tracks.findIndex(obj => obj === trackUri);
            ls.last5Tracks.splice(idx, 1);
            localStorage.setItem('oTplayer-local', JSON.stringify(ls));
        }
        displayLast5Tracks();
    }

    function displayLast5Tracks() {
        var ls = JSON.parse(localStorage.getItem('oTplayer-local'));
        if (ls != null) {
            var buttons = ls.last5Tracks.reduce((acc, obj) => {
                return acc + '<button class="last-5-tracks" onclick="loadTrack(\'' + obj + '\')">' + obj + '</button>'
                + ' <button class="last-5-tracks" style="width: 3em !important;" onclick="removeTrackUri(\'' + obj + '\')">&#10006;</button><br>';
            }, "");
            document.getElementById("recent-tracks").innerHTML = buttons;
        }
    }

</script>

<style>
    body {
        font-family: Arial;
    }

    .example-url {
        width: 50%;
    }

    .controls {
        display: none;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .progressor {
        height: 15px;
        width: 100%;
        background: #ccc;
    }

    .progressor-progress {
        height: 100%;
        background: #777;
    }

    #oTplayerEl {
        max-width: 95vw; /* limit player width to 95% of window (viewport) width */
        max-height: 100vh; /* 100% viewport height */
    }

    button, .my-button {
        border-radius: 4px;
        border: 2px solid;
        border-color: transparent;
        /* #4b8f29; */
        display: inline-block;
        cursor: pointer;
        /* color:#FFFAF0; */
        font-family: Arial;
        font-size: 13px;
        /* font-weight:bold; */
        /* width: 10em; */
        height: 2em;
        margin: 0.25em;
    }

    .last-5-tracks {
        background-color: #E6E6E6 !important;
        color: #000 !important;
        /* width: 100% !important; */
        height: 3em !important;
        margin-bottom: 2px;
        padding-top: auto;
        padding-bottom: auto;
    }
</style>