funstim.html

<div class="container">
  <h1>Convert funscript to phase modulated MP3</h1>
  <hr>
  <h3>Settings</h3>
  <div class="row">
    <div class="form col-6">
      <div class="form-group">
        <label class="form-label">Fade in/out</label>
        <select class="form-control" id="fade">
          <option value="0">Disabled</option>
          <option value="1000">1 second</option>
          <option value="2000">2 seconds</option>
          <option value="5000" selected>5 seconds</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">Sample rate</label>
        <select class="form-control" id="sampleRate">
          <option value="8000" selected>8000 Hz (Fast)</option>
          <option value="22050">22050 Hz</option>
          <option value="44100">44100 Hz (Slow)</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">Frequency</label>
        <div class="input-group">
          <input class="form-control" type="text" id="frequency" value="420,520,620">
          <div class="input-group-append"><span class="input-group-text">Hz</span></div>
        </div>
        <small class="form-text text-muted">Enter a single frequency or a comma-separated list of frequencies to combine</small>
      </div>
      <div class="form-check ml-2">
        <input class="form-check-input" type="checkbox" id="polarity">
        <label class="form-check-label">Inverted</label>
      </div>
      <div class="form-check ml-2">
        <input class="form-check-input" type="checkbox" id="doubletime">
        <label class="form-check-label">Double time (Every action is one full up & down motion)</label>
      </div>
      <div class="form-check ml-2">
        <input class="form-check-input" checked type="checkbox" id="fullrange">
        <label class="form-check-label">Expand to full range</label>
      </div>
      <div class="form-check ml-2">
        <input class="form-check-input" checked type="checkbox" id="fadeonpause">
        <label class="form-check-label">Fade out during pauses/slow sections</label>
      </div>
      <div class="form-check ml-2">
        <input class="form-check-input" type="checkbox" id="debug">
        <label class="form-check-label">Output amplitude & phase envelopes (FOR TESTING ONLY)</label>
      </div>
    </div>
  </div>
  <hr>
  <h3>Select one or more .funscript file(s) to be rendered</h3>
  <input type="file" id="file-input" multiple />
  <hr>
  <div id="progress">
  </div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
  function updateRow(row, text, status, closeable) {
    row.className = "alert alert-" + status + " " + (closeable ? "alert-dismissible " : "") + "fade show";
    row.innerHTML = text + (closeable ? "<button type='button' class='close' data-dismiss='alert'><span>&times;</span></button>" : "");
  }

  function readFiles(e) {
    let progress = document.getElementById('progress');
  
    for(let file of e.target.files) {
      let fileName = file.name.split(".").slice(0, -1).join(".");
      let reader = new FileReader();
      
      let row = document.createElement('div');
      updateRow(row, "0% - " + fileName, "primary", false);
      
      progress.appendChild(row);
      
      reader.onload = event => {
        let msg = {};
        
        msg.fade = document.getElementById('fade').value;
        msg.sampleRate = document.getElementById('sampleRate').value;
        msg.bitrate = 192;
        msg.frequency = document.getElementById('frequency').value.split(",");
        msg.amplitude = 0.9;
        msg.polarity = document.getElementById('polarity').checked ? 1 : -1;
        msg.doubletime = document.getElementById('doubletime').checked;
        msg.fullrange = document.getElementById('fullrange').checked;
        msg.fadeonpause = document.getElementById('fadeonpause').checked;
        msg.debug = document.getElementById('debug').checked;
        
        msg.funscript = event.target.result;
        
        let worker = new Worker("funstim.js");
        
        worker.onmessage = m => {
          m = m.data;
          updateRow(row, m.pctDone + "% - " + fileName, m.status, m.pctDone == 100);
        
          if(m.mp3Data) {
            download(fileName + ".mp3", m.mp3Data);
          }
        };
        
        worker.onerror = e => {
        console.log(e);
          updateRow(row, "Error - " + fileName + ": " + e.message, "danger", true);
        };
        
        worker.postMessage(msg);
      };
      reader.readAsText(file);
    }
    
    document.getElementById('file-input').value = "";
  }
  
  document.getElementById('file-input').addEventListener('change', readFiles, false);

  function download(filename, text) {
    let blob = new Blob(text, { type: "audio/mp3" });
    let link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
</script>