JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<select name="plants" id="plants" size="9" onchange="loadSoundFile(this.value)">
      <option value="http://finegardening.com/pguide/assets/abelia.mp3">Abelia</option>
      <option value="http://finegardening.com/pguide/assets/abelia_x_grandiflora.mp3">Abelia Ă— grandiflora</option>
      <option value="http://finegardening.com/pguide/assets/Abeliophyllum.mp3">Abeliophyllum</option>
      <option value="http://finegardening.com/pguide/assets/abeliophyllum_distichum.mp3">Abeliophyllum distichum</option>
      <option value="http://finegardening.com/pguide/assets/Abelmoschus.mp3">Abelmoschus</option>
      <option value="http://finegardening.com/pguide/assets/abelmoschus_manihot.mp3">Abelmoschus manihot</option>

      <option value="http://finegardening.com/pguide/assets/abies_fraseri.mp3">Abies fraseri</option>
      <option value="http://finegardening.com/pguide/assets/Abies_koreana.mp3">Abies koreana</option>
      <option value="http://finegardening.com/pguide/assets/abies_lasiocarpa_var_arizonica.mp3">Abies lasiocarpa var. arizonica</option>
  </select>
  
  <!--<input type="file" accept="audio/*">-->
  <button onclick="playSound()">Speak</button>
  <button onclick="stopSound()">Stop</button>

JavaScript

var context = new window.webkitAudioContext();
var source = null;
var audioBuffer = null;
 
function stopSound() {
  if (source) {
    source.noteOff(0);
  }
}

function playSound() {
  source = context.createBufferSource(); // Global so we can .noteOff() later.
  source.buffer = audioBuffer;
  source.loop = false;
  source.connect(context.destination);
  source.noteOn(0);    
}

function initSound(arrayBuffer) {
  context.decodeAudioData(arrayBuffer, function(buffer) {
    audioBuffer = buffer;
    var buttons = document.querySelectorAll('button');
    buttons[0].disabled = false;
    buttons[1].disabled = false;
  }, function(e) {
    console.log('Error decoding', e);
  }); 
}
  
function loadSoundFile(url) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'arraybuffer';
  request.onload = function(e) {
    initSound(e.target.response);
  };
  request.send();
}