JSFiddle - React, Tailwind, and code Playground

by Hugo Lopez

HTML

<div>
  <input id="langLL" placeholder="Language LL Qid" value="Q150" />
  <input id="word" placeholder="Word" value="vert" />
  <button id="search">Search</button>
  <button id="play">Play all!</button>
</div>
<div id="gallery"></div>

CSS

input,
button {
    border: 1px solid #999;
    background: #EEF;
    padding: 1em 1.5em;
    margin: .2em;
}
input {
  width: 9em;
}

JavaScript

/* ************************************************************* */
/* TOOLBOX ***************************************************** */
// URL/API
var wordToURL = function(languageLLQid, word) {
  languageLLQid = languageLLQid || 'Q150';
  word = word || 'orange';
  return `https://commons.wikimedia.org/w/api.php?origin=*&action=query&prop=imageinfo|pageprops&generator=search&iiprop=url|extmetadata&iimetadataversion=1&iiextmetadatafilter=Categories&gsrsearch=intitle:/LL-${languageLLQid}.*-${word}\.wav/&gsrnamespace=6&gsrlimit=50&gsrwhat=text&format=json&utf8=1`; 
}
// DATA CLEAUP
var rawToFlat = function(obj) {
  var pages = Object.values(obj);
  return pages.map(item => {
    return {
      Commons_pageid: item.pageid,
      Commons_title: item.title,
      langIso: item.title.split('(')[1].split(')')[0],
      langLL: item.title.split(' ')[0].split('-')[1],
      Commons_url: item.imageinfo[0].url,
      Commons_descriptionurl: item.imageinfo[0].descriptionurl,
      record: item.pageprops.defaultsort,
      recorder: item.imageinfo[0].extmetadata.Categories.value.split(' by ')[1]
    }
  })
};

// HTML
var audioHtml = function(langIso, recorder, record, url) {
  //`<li>${langIso} > ${speaker} > ${record}: <a href="${url}">link</a></li>`
  return `<figure>
    <figcaption><big>${record}</big> (${langIso} ― ${recorder})</figcaption>
    <audio
        controls
        src="${url}">
            Your browser does not support the <code>audio</code> element.
    </audio>
</figure>`
}
var injectAudioToGallery = function(hookId, arr) {
  // clean the place
  $(hookId).html("");
  // add items
  arr.map(item => {
    console.log(item);
    $(hookId).append(audioHtml(item.langIso, item.recorder, item.record, item.Commons_url))
  })
}

/* ************************************************************* */
/* CHAIN AUDIO ************************************************* */
var audiosStopChainPlay = function() {
  $("audio").off("ended");
}
var audiosAddChainPlay = function()...