Disable audio play button for defined time even when page is reloaded (with localStorage?)

Question

In this fiddle I made a script building a play button for audio files, that allows playing the file only twice and then disables it. But after reloading the page, the button is active again. How can I make sure, the button stays disabled for a defined duration of 30 seconds for example? I was wrapping my head around localStorage and found a promising question/answer here, but couldn't transfer the knowhow to my usecase. Can someone help me out?

function buildLimitedPlay(selector) {
  $(selector).each(function(i) {
    var myaudio = $(this)[0];
    var button = $(this).next("input.limited-play")[0];
    var index = 2;
    $(button).css('display', 'block');
    $(button).val("Play Clip");
    $(myaudio).on('ended', function() {
      index--;
      $(button).val('Play again');
      if (index == 0) {
        $(button).css('background', 'red');
        $(button).css('cursor', 'not-allowed');
        $(button).css('text-decoration', 'line-through');
        $(button).disabled;
      }
    });
    $(button).on("click", function() {
      if (index > 0) {
        myaudio.play();
      }
    });
  });
}
buildLimitedPlay("audio.limited-play");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<audio class="limited-play" preload="none">
  <source src="http://www.noiseaddicts.com/samples_1w72b820/3726.mp3" type="audio/mpeg">
</audio>
<input value="Play Clip" class="limited-play" type="button">

Answer 1

I'm assuming you want to automatically enable the play button after the predefined disabled time passes, also you will have multiple audios to play with multiple buttons. here is the code that will work after refresh and automatically enable the button after time out.

$(function () {
        function now() { return +new Date }
        var db = window.db = {
            get: function (key) {
                var entry = JSON.parse(localStorage.getItem(key) || "0");
                if (!entry) return null;
                if (entry.ttl && entry.ttl + entry.now < now()) {
                    localStorage.removeItem(key);
                    return null;
                }
                return entry.value;
            },
            set: function (key, value, ttl) {
                localStorage.setItem(key, JSON.stringify({
                    ttl: ttl || 0,
                    now: now(),
                    value: value
                }));
            }
        };

        function buildLimitedPlay(selector) {
            $(selector).each(function (i) {
                var getRemainingTurn = function () {
                    var turn = db.get('remainingTurn' + i);
                    return null == turn ? 2 : turn;
                };
                var setRemainingTurn = function (turn, timeToLiveInMillisecond) {
                    db.set('remainingTurn' + i, turn, timeToLiveInMillisecond || 0);
                };

                var myaudio = this;
                var $button = $(this).next("input.limited-play:first");
                $button.css('display', 'block')
                    .on("click", function () {
                        if (getRemainingTurn() > 0) {
                            myaudio.play();
                        }
                    });

                var setAudioState = function (turn) {
                    $button.val(2 == turn ? 'Play Clip' : 'Play again');
                    if (turn == 0) {
                        $button.css({ 'background': 'red', 'cursor': 'not-allowed', 'text-decoration': 'line-through' });                            
                    }
                    else {
                        $button.css({ 'background': '', 'cursor': '', 'text-decoration': 'none' });                            
                    }
                };

                var disabledPeriodInMillisecond = 30 * 1000;
                var tryEnableAudio = function () {
                    turn = getRemainingTurn();
                    if (0 == turn) {
                        //because we don't know how much time passed since it was disabled in case of a page refresh for simplicity.
                        setTimeout(tryEnableAudio, 50);
                        return;
                    }

                    setAudioState(turn);
                };

                $(myaudio).on('ended', function () {
                    var turn = getRemainingTurn();
                    turn--;
                    setAudioState(turn);

                    if (0 == turn) {
                        setRemainingTurn(turn, disabledPeriodInMillisecond);
                        tryEnableAudio();
                    }
                    else {
                        setRemainingTurn(turn);
                    }
                });

                setAudioState(getRemainingTurn());
                tryEnableAudio();
            });
        }
        buildLimitedPlay("audio.limited-play");
    });