JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/localForage/localForage/4ce19202/dist/localforage.min.js"></script>
<pre id="log"></pre>
<input type="file" id="f" />
<br><br>
<button id="clear_btn" disabled="true">
clear database
</button>

JavaScript

f.onchange = store;

function store() {
  if (this.files[0].type.indexOf('audio/') !== 0) {
    log.textContent = 'Not an audio file...'
    return;
  }
  localforage.setItem('myfile', f.files[0]).then(_ => {
    log.textContent = 'page will soon reload, and load this audio file from storage';
    setTimeout(_ => location.reload(), 3000);
  })
}

function getFile() {
  var blob = localforage.getItem('myfile').then(blob => {
    if (!blob) {
      log.textContent = 'Please choose an audio file to be stored.'
      return;
    }
    clear_btn.disabled = false;
    log.textContent = 'playing stored file: ' + blob.name;
    const aud = new Audio(URL.createObjectURL(blob));
    aud.onloadedmetadata = e => URL.revokeObjectURL(aud.src);
    aud.play();
  }).catch(e => console.log(e));
}
getFile();

clear_btn.onclick = e => {
	localforage.removeItem('myfile');
}