rhoumi.github.io/follower.html at main · Rhoumi/rhoumi.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple host that loads a non bundled plugin</title>
</head>
<body>
<main>
<audio id="player" src="https://wasabi.i3s.unice.fr/WebAudioPluginBank/BasketCaseGreendayriffDI.mp3" controls
loop crossOrigin="anonymous">
</audio>
<div id="mount"></div>
</main>
<script>
const player = document.querySelector('#player');
const mount = document.querySelector('#mount');
const AudioContext = window.AudioContext // Default
|| window.webkitAudioContext
|| false;
const audioContext = new AudioContext();
const mediaElementSource = audioContext.createMediaElementSource(player);

// Very simple function to connect the plugin audionode to the host
const connectPlugin = (audioNode) => {
mediaElementSource.connect(audioNode);
audioNode.connect(audioContext.destination);
};
const mountPlugin = (domNode) => {
mount.innerHtml = '';
mount.appendChild(domNode);
};
(async () => {
// Init WamEnv
const { default: initializeWamHost } = await import("https://www.webaudiomodules.com/sdk/2.0.0-alpha.6/src/initializeWamHost.js");
const [hostGroupId] = await initializeWamHost(audioContext);
// Import WAM
const { default: WAM } = await import('https://mainline.i3s.unice.fr/PedalEditor/Back-End/functional-pedals/published/FollowerSynth/index.js');
// Create a new instance of the plugin
const instance = await WAM.createInstance(hostGroupId, audioContext);
window.instance = instance;
// Connect the audionode to the host
connectPlugin(instance.audioNode);
const pluginDomNode = await instance.createGui();

mountPlugin(pluginDomNode);
player.onplay = () => {
    audioContext.resume(); // audio context must be resumed because browser restrictions
};
})();
</script>
</body>
</html>