<div id="header">
  <p>Click first the load WAM button, then the send note button to make the loaded instrument play a MIDI note.</p>
  <button id="start">Load WAM (standard GUI)</button>
  <!--
<button id="startCustom">Load WAM (custom GUI)</button>
-->
  <button id="note">Send MIDI Note</button>
</div>
<div id="host-main">
WAM :
<div id="wam-container">
</div>
</div>

const AudioCtx = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioCtx();

let hostKey;
let plugins;

const initHost = async (audioContext) => {
  const { default: initializeWamHost } = await import("https://www.webaudiomodules.com/sdk/2.0.0-alpha.6/src/initializeWamHost.js");
  const [, key] = await initializeWamHost(audioContext, "example");
  hostKey = key;
};

// Load a WebAudioModule, and return an instance.
async function loadWAM(path) {
  const initialState = {};
  const {default: WAM} = await import(path);
  
  if (typeof WAM !== 'function' || !WAM.isWebAudioModuleConstructor) {
    throw new Error(`Path ${path} is not a WebAudioModule.`)
  };
  
  const instance = new WAM("example", audioContext)
  await instance.initialize(initialState)
  
  return instance;
}

let wam;

async function run(wamUrl) {
  
  await initHost(audioContext);

  wam = await loadWAM(wamUrl)
  
  // create the UI and add it to the container
  const ui = await wam.createGui()
  const container = document.getElementById("wam-container")
  container.appendChild(ui)
    
  wam.audioNode.connect(audioContext.destination); 
}

document.getElementById("start").addEventListener("click", () => {
  audioContext.resume();
  // Je n'arrive pas à faire jouer une note MIDI avec ce WAM
  run("https://mainline.i3s.unice.fr/PedalEditor/Back-End/functional-pedals/published/fluteMIDI2/indexGUIStandard.js");
  // Mais j'y arrive avec celui-là.
  //run("https://mainline.i3s.unice.fr/PedalEditor/Back-End/functional-pedals/published/fluteMIDI/index.js"); 
})

document.getElementById("startCustom").addEventListener("click", () => {
  audioContext.resume();
  run("https://mainline.i3s.unice.fr/PedalEditor/Back-End/functional-pedals/published/fluteMIDI2/index.js");
})

document.getElementById("note").addEventListener("click", () => {
  wam.audioNode.scheduleEvents({ type: 'wam-midi', time: wam.audioNode.context.currentTime, data: { bytes: new Uint8Array([0x90, 74, 100]) } });
  wam.audioNode.scheduleEvents({ type: 'wam-midi', time: wam.audioNode.context.currentTime + 0.25, data: { bytes: new Uint8Array([0x80, 74, 100]) } });
})