JSFiddle - React, Tailwind, and code Playground

by mneubrand

HTML

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>jsfxr demo</title>
  <script src="jsfxr.min.js"></script>
  <script>
    var url = window.URL || window.webkitURL;

    function playSound(params) {
      try {
        var soundURL = jsfxr(params);
        var player = new Audio();
        player.addEventListener('error', function(e) {
          console.log("Error: " + player.error.code);
        }, false);
        player.src = soundURL;
        player.play();
        player.addEventListener('ended', function(e) {
          url.revokeObjectURL(soundURL);
        }, false);
      } catch(e) {
        console.log(e.message);
      }
    }
      
    function playString(str) {
       var temp = str.split(",");
       var params = new Array();
       for(var i = 0; i < temp.length; i++) {
         params[i] = parseFloat(temp[i]);
       }
       playSound(params);
    }

  </script>
</head>

<body>
  <form>
    <button onclick="playSound([3,,0.3708,0.5822,0.3851,0.0584,,-0.0268,,,,-0.0749,0.7624,,,,,,1,,,,,0.5]); return false;">Play Explosion</button>
    <button onclick="playSound([1,,0.3201,,0.4743,0.3202,,0.0833,,0.4207,0.4278,,,,,,,,1,,,,,0.5]); return false;">Play Powerup</button>
    <button onclick="playSound([0,,0.1812,,0.1349,0.4524,,0.2365,,,,,,0.0819,,,,,1,,,,,0.5]); return false;">Play Jump</button>

    <br/>

    <label for="soundsettings">Paste as3fxr string here: </label>
    <input type="text" id="soundsettings" size="100"/>
    <button onclick="playString(document.getElementById('soundsettings').value); return false;">Play Custom Sound</button>
  </form>
</body>
</html>

JavaScript

/**
 * SfxrParams
 *
 * Copyright 2010 Thomas Vian
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author Thomas Vian
 */
function SfxrParams() {
  //--------------------------------------------------------------------------
  //
  //  Settings String Methods
  //
  //--------------------------------------------------------------------------

  /**
   * Parses a settings array into the parameters
   * @param array Array of the settings values, where elements 0 - 23 are
   *                a: waveType
   *                b: attackTime
   *                c: sustainTime
   *                d: sustainPunch
   *                e: decayTime
   *                f: startFrequency
   *                g: minFrequency
   *                h: slide
   *                i: deltaSlide
   *                j: vibratoDepth
   *                k: vibratoSpeed
   *                l: changeAmount
   *                m: changeSpeed
   *                n: squareDuty
   *                o: dutySweep
   *                p: repeatSpeed
   *                q: phaserOffset
   *                r: phaserSweep
   *                s: lpFilterCutoff
   *                t: lpFilterCutoffSweep
   *                u: lpFilterResonance
   *                v: hpFilterCutoff
   *                w: hpFilterCutoffSweep
   *                x: masterVolume
   * @return If the string successfully parsed
   */
  this.setSettings = function(values)
  {
    for ( var i = 0; i < 24; i++ )
    {
     ...