wam-community
Version:
A collection of prebuilt Web Audio Modules ready for use
384 lines (324 loc) • 8.69 kB
HTML
<script>
WebAudioControlsOptions = {
useMidi: 1,
};
</script>
<style>
@font-face {
font-family: 'BouWeste';
src: url('./assets/BouWeste.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
<script src="../webaudio-controls.js"></script>
<template id="distomachine">
<style>
:host {
font: 'BouWeste', 'Arial Black';
display: block;
width: 450px;
height: 150px;
user-select: none;
border-radius: 10px;
position: relative;
z-index: 9;
}
.webaudioctrl-tooltip {
color: #000 ;
font-family: "Arial Black" ;
font-size: 11px ;
}
#background-image {
width: 450px;
height: 150px;
opacity: 1;
box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.7),
inset -2px -2px 5px 0px rgba(0, 0, 0, 0.2),
inset 3px 1px 1px 4px rgba(255, 255, 255, 0.2),
1px 0px 1px 0px rgba(0, 0, 0, 0.9),
0 2px 1px 0 rgba(0, 0, 0, 0.9),
1px 1px 1px 0px rgba(0, 0, 0, 0.9);
}
.knob,
.switch,
.icon,
.label {
position: absolute;
cursor: pointer;
}
#switch1 {
bottom: 20px;
right: 20px;
}
#presence {
left: 375px;
top: 20px;
}
#presence div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#reverb {
left: 325px;
top: 20px;
}
#reverb div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#treble {
left: 275px;
top: 20px;
}
#treble div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#middle {
left: 225px;
top: 20px;
}
#middle div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#bass {
left: 175px;
top: 20px;
}
#bass div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#drive {
left: 125px;
top: 20px;
}
#drive div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#master {
left: 75px;
top: 20px;
}
#master div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#volume {
left: 25px;
top: 20px;
}
#volume div {
color: #000000;
font-family: "BouWeste";
font-size: 9px;
}
#label_713 {
left: 120px;
top: 98px;
color: #000000;
font-family: "BouWeste";
font-size: 23px;
}
#menuPresets {
border-style: solid;
border-width: 2px;
border-color: #000000;
background-color: rgba(236, 236, 236, 0.767);
position: absolute;
width: 100px;
left: 30px;
top: 100px;
color: #000000;
font-family: "Arial Black";
font-size: 9px;
}
</style>
<img id="background-image">
<div class="switchCont" id="switch1">
<webaudio-switch class="switch" value="1" id="switch1" height="30" width="60"></webaudio-switch>
</div>
<div class="knob " id="presence">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="9.4" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Presence</div>
</div>
<div class="knob " id="reverb">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="0.7" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Reverb</div>
</div>
<div class="knob " id="treble">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="3.8" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Treble</div>
</div>
<div class="knob " id="middle">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="8" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Middle</div>
</div>
<div class="knob " id="bass">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="8.7" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Bass</div>
</div>
<div class="knob " id="drive">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="5.2" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Drive</div>
</div>
<div class="knob " id="master">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="5.5" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Master</div>
</div>
<div class="knob " id="volume">
<webaudio-knob height="40" width="40" sprites="100" min="0" max="10" step="0.1" value="2" midilearn="1">
</webaudio-knob>
<div style="text-align:center">Volume</div>
</div>
<select id="menuPresets" style="display:none">
<option value=0>Default</option>
<option value=1>Jimmy HDX</option>
<option value=2>Slasher</option>
<option value=3>Metal</option>
<option value=4>Hard Rock Classic 1</option>
<option value=5 selected>Hard Rock Classic 2</option>
<option value=6>Clean and Warm</option>
<option value=7>Strong and Warm</option>
<option value=8>Another Clean Sound</option>
<option value=9>HR3</option>
</select>
<div class="label" id="label_713">Disto Machine</div>
</template>
<script>
let DistoMachineTemp = document.currentScript.ownerDocument.querySelector('#distomachine');
class DistoMachineGui extends HTMLElement {
constructor(plug) {
super();
this._plug = plug;
this._plug.gui = this;
this._root = this.attachShadow({
mode: 'open'
});
this._root.appendChild(DistoMachineTemp.content.cloneNode(true));
this.knobs = this._root.querySelectorAll(".knob");
this.isOn;
this.state = new Object();
this.menu = this._root.querySelector("#menuPresets");
this.index = this.menu.value;
this.setKnobs();
this.setSwitchListener();
this.setResources();
this.avoidDrag();
console.log("### calling reactivate")
this.reactivate();
}
get properties() {
this.boundingRect = {
dataWidth: {
type: Number,
value: 450
},
dataHeight: {
type: Number,
value: 150
}
};
return this.boundingRect;
}
static get observedAttributes() {
return ['state'];
}
simulatePresetMenuChoice(val) {
this._root.querySelector("#menuPresets").value = val;
this._plug.setParam("preset", val);
}
connectedCallback() {
this.simulatePresetMenuChoice(5);
}
attributeChangedCallback() {
this.state = JSON.parse(this.getAttribute('state'));
console.log("attributeChangedCallback state = " + this.getAttribute('state'))
try {
if (this.state.status == "enable") {
this._root.querySelector("#switch1").querySelector("webaudio-switch").value = 1;
this.isOn = true;
} else {
this._root.querySelector("#switch1").querySelector("webaudio-switch").value = 0;
this.isOn = false;
}
this.knobs = this._root.querySelectorAll(".knob");
for (var i = 0; i < this.knobs.length; i++) {
this.knobs[i].querySelector("webaudio-knob").setValue(this.state[this.knobs[i].id], false);
}
if (this.state.preset) {
var preset = this._root.querySelector("#menuPresets");
preset.value = this.state.preset;
}
} catch (err) {
}
}
setResources() {
let menuPresets = this._root.querySelector("#menuPresets");
menuPresets.onchange = (e) => {
this.index = e.target.value;
this._plug.setParam("preset", this.index);
}
var background = this._root.querySelector("img");
background.src = this._plug.URL + '/assets/DistoMachine.png';
background.style = 'border-radius :10px;'
this._root.querySelectorAll(".knob").forEach((knob) => {
knob.querySelector("webaudio-knob").setAttribute('src', this._plug.URL +
'/assets/Jambalaya.png');
});
this._root.querySelector("#switch1").querySelector("webaudio-switch").setAttribute('src', this._plug.URL +
'/assets/switch_2.png');
}
eventToKnob(rank) {
this.knobs[rank].querySelector("webaudio-knob").addEventListener('input', (e) =>
this._plug.setParam(this.knobs[rank].id, e.target.value));
}
setKnobs() {
for (var i = 0; i < this.knobs.length; i++) {
this.eventToKnob(i);
}
}
bypass() {
this._plug.setParam("status", "disable");
}
reactivate() {
console.log("### distomachine reactivate")
this._plug.setParam("status", "enable");
}
setSwitchListener() {
this._root.querySelector("#switch1").querySelector("webaudio-switch").addEventListener('change', (e) => {
if (this.isOn) this.bypass()
else this.reactivate();
this.isOn = !this.isOn;
});
}
avoidDrag() {
this._root.querySelector("#background-image").draggable = false;
}
}
try {
customElements.define('wasabi-distomachine', DistoMachineGui);
} catch (error) {
}
createDistoMachine = (plug) => {
let elem = new DistoMachineGui(plug);
return elem;
}
</script>