Skip to content

Commit

Permalink
G
Browse files Browse the repository at this point in the history
  • Loading branch information
Yisheng Jiang committed Jul 20, 2024
1 parent 41d4ccc commit 34ebc0d
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 129 deletions.
28 changes: 12 additions & 16 deletions e2e.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,25 @@
grid-template-columns: 1fr 1fr;
}

background-color: black;
color: grey;

=======.article-preview {
margin-top: 30px;
}
.article-preview {
margin-top: 30px;
}

.timeseries {
right: 0;
height: 10px;
position: fixed;
top: 50%;
}
.timeseries {
right: 0;
height: 10px;
position: fixed;
top: 50%;
}

.timeseries:active {
height: 250px;
}
.timeseries:active {
height: 250px;
}

</style>
</head>
<body>
<div id="root"></div>

<script src="./e2e.js" type="module"></script>

</body>
Expand Down
75 changes: 34 additions & 41 deletions e2e.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,19 @@ let program,
volMeters;

renderMain().then(() => {
alert("sss");
if (document.hash != "") rendProgram();
rendProgram();
if (document.hash != "") {
const hashId = document.location.hash.substring(1).split("|");

rendProgram(...hashId);
} else {
rendProgram(0, 0);
}
});

window.addEventListener("hashchange", rendProgram);

async function renderMain() {
await loadWait;
await startSpinner();

document.body.innerHTML = "";
mkdiv("nav", [
Expand Down Expand Up @@ -85,12 +88,9 @@ async function renderMain() {
document.body.append(main);
}

async function rendProgram() {
const hashId = document.location.hash.substring(1).split("|");
const intpre = parseInt(hashId[0]);
const pid = intpre;
async function rendProgram(pid, zoneRef) {
const bid = 0;
const zoneRef = hashId[1];
// await spinner.shipProgram(program);

program = sf2file.loadProgram(pid, bid);
if (!zone)
Expand All @@ -101,7 +101,7 @@ async function rendProgram() {
const kRangeList = program.zMap.map(
(z) =>
`<option value=${z.ref} ${z.ref + "" == zone?.ref ? "selected" : ""}>${
z.Unused1 + "|" + z.Unused2
z.PBagId + "|" + z.IbagId
} ${
"key " +
[z.KeyRange.lo, z.KeyRange.hi].join("-") +
Expand All @@ -118,7 +118,7 @@ async function rendProgram() {
{
oninput: (e) => {
renderZ(program.zMap.filter((z) => z.ref == e.target.value)[0]);
window.location.hash = "#" + pid + "|" + e.target.value;
// window.location.hash = "#" + pid + "|" + e.target.value;
},
},
kRangeList
Expand All @@ -135,13 +135,12 @@ async function rendProgram() {
),
]);
const mainRight = mkdiv("div", { class: "note" }, [
mkdiv("div", { class: "note-title" }, [sf2file.programNames[hashId]]),
mkdiv("div", { class: "note-title" }, [sf2file.programNames[pid]]),
articleHeader,
]);
rightPanel.replaceChildren(mainRight, articleMain);

canvas = mkcanvas({ container: articleHeader });
await spinner.shipProgram(program);
if (zone) renderZ(zone);
}
async function renderZ(zoneSelect) {
Expand Down Expand Up @@ -180,7 +179,7 @@ function renderSampleView(zoneSelect) {

JSON.stringify(zoneSelect.KeyRange),
"<br>",
JSON.stringify(zoneSelect.VolRange),
JSON.stringify(zoneSelect.VelRange),
]);
}

Expand Down Expand Up @@ -233,9 +232,14 @@ let ctx;
async function startSpinner() {
ctx = new AudioContext();
audioPath = await mkpath(ctx);
audioPath.bindKeyboard(() => 0);
await audioPath.startAudio();
spinner = audioPath.spinner;

if (program) {
audioPath.loadProgram(program);
}

spinner.port.onmessage = ({ data }) => {
if (data.currentFrame) {
volMeters.innerHTML = data.currentFrame;
Expand All @@ -248,10 +252,12 @@ async function startSpinner() {
}
async function rendSample(e, zoneObj) {
e.target.innerText = "loading";
if (!ctx || !spinner) await startSpinner();
if (ctx.state !== "running") await ctx.resume();
if (!ctx || !spinner) {
await startSpinner();
}
if (!zoneObj) return;
if (!spinner) startSpinner();
// if (program) await spinner.shipProgram(program);

const { arr, ref } = zoneObj;
if (zoneObj.isDirty) {
spinner.port.postMessage({
Expand All @@ -262,13 +268,7 @@ async function rendSample(e, zoneObj) {
}
e.target.innerText = "playing";

spinner.port.postMessage([
0x90,
0,
zoneObj.calcPitchRatio(55, spinner.context.sampleRate),
122,
[program.presetId, ref],
]);
spinner.port.postMessage([0x90, 0, 55, 122, ozon.presetId, ref]);
e.target.addEventListener(
"mouseup",
() => {
Expand All @@ -282,25 +282,18 @@ const drawEV = async (zone, target) => {
const [delay, att, hold, decay, sustain, release] = zone.arr.slice(33, 39);
console.log(delay, att, hold, decay, sustain, release);
const tc2time = (t) => Math.pow(2, t / 1200);
const ctx = new OfflineAudioContext(1, 6000, 3000);
const ctx = new OfflineAudioContext(1, 33, 3000);
const o = ctx.createOscillator({ frequency: 1 });
const amp = new GainNode(ctx, { gain: 0 });
const o = new ConstantSourceNode(ctx, { offset: 0.2 });
o.connect(new DelayNode(ctx, { delayTime: tc2time(delay) }));

// amp.gain.setValueAtTime(0, tc2time(delay));
amp.gain.setValueAtTime(0, 0);
amp.gain.linearRampToValueAtTime(1, tc2time(att));
amp.gain.cancelAndHoldAtTime(tc2time(att));
amp.gain.setTargetAtTime(
(1440 - sustain) / 1440,
tc2time(att) + tc2time(hold),
tc2time(decay)
);
amp.gain.cancelAndHoldAtTime(
tc2time(att) + tc2time(tc2time(decay)) + tc2time(hold)
);
amp.gain.cancelAndHoldAtTime(
tc2time(att) + tc2time(tc2time(decay)) + tc2time(hold) + 0.1
);
amp.gain.linearRampToValueAtTime(1 - sustain / 1000, tc2time(decay));
// amp.gain.cancelAndHoldAtTime(
// tc2time(att) + tc2time(tc2time(decay)) + tc2time(hold)
// );
// amp.gain.cancelAndHoldAtTime(
// tc2time(att) + tc2time(tc2time(decay)) + tc2time(hold) + 0.1
// );

o.connect(amp);
amp.connect(ctx.destination);
Expand Down
89 changes: 44 additions & 45 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,50 @@ ctx = new AudioContext({
});
const { mkpath } = await import("./mkpath.js");
const eventPipe = mkeventsPipe();
eventPipe.onmessage(function (dd) {
let data;
if (dd.length <= 3) {
const [a, b, c] = dd;
data = [a & 0xf0, a & 0x0f, b, c];
}
const [cmd, ch, v1, v2] = data;
const [key, velocity] = [v1, v2];
console.log(dd);
switch (cmd) {
case midi_ch_cmds.continuous_change: // set CC
spinner.port.postMessage([(cmd << 7) | ch, v1, v2]);
break;
case midi_ch_cmds.change_program: //change porg
if (v1 == 0 && ch > 0) {
channels[ch].setProgram(v1, 128);
} else {
channels[ch].setProgram(v1, ch === DRUMSCHANNEL ? 128 : 0);
}
break;
case midi_ch_cmds.note_on:
if (velocity == 0) {
// spinner.port.postMessage(data);
channels[ch].keyOff(key, velocity);
} else {
channels[ch].keyOn(key, velocity);
// uiControllers[ch].keyOn(key, velocity, ctx.currentTime);
}
break;
case midi_ch_cmds.note_off:
channels[ch].keyOff(key, velocity);

uiControllers[ch].keyOff(key, velocity, ctx.currentTime);

break;

case midi_ch_cmds.pitchbend:
spinner.port.postMessage(data);
break;
default:
spinner.port.postMessage(data);
break;
}
});
const apath = await mkpath(ctx, eventPipe);
const spinner = apath.spinner;

Expand Down Expand Up @@ -145,51 +189,6 @@ if (midiUrl) {

// mk_eq_bar(0, apath.eq_set).attachTo(document.querySelector("eq"));
//link pipes
eventPipe.onmessage(function (dd) {
8;
let data;
if (dd.length <= 3) {
const [a, b, c] = dd;
data = [a & 0xf0, a & 0x0f, b, c];
}
const [cmd, ch, v1, v2] = data;
const [key, velocity] = [v1, v2];

switch (cmd) {
case midi_ch_cmds.continuous_change: // set CC
spinner.port.postMessage([cmd, ch, v1, v2]);
break;
case midi_ch_cmds.change_program: //change porg
if (v1 == 0 && ch > 0) {
channels[ch].setProgram(v1, 128);
} else {
channels[ch].setProgram(v1, ch === DRUMSCHANNEL ? 128 : 0);
}
break;
case midi_ch_cmds.note_on:
if (velocity == 0) {
channels[ch].keyOff(key, velocity);
uiControllers[ch].keyOff(key, velocity, ctx.currentTime);
} else {
channels[ch].keyOn(key, velocity);
uiControllers[ch].keyOn(key, velocity, ctx.currentTime);
}
break;
case midi_ch_cmds.note_off:
channels[ch].keyOff(key, velocity);

uiControllers[ch].keyOff(key, velocity, ctx.currentTime);

break;

case midi_ch_cmds.pitchbend:
spinner.port.postMessage(data);
break;
default:
spinner.port.postMessage(data);
break;
}
});

// eventPipe.onmessage(eventsHandler(channels, spinner, last_rend_end_at, ctx));
initNavigatorMidiAccess({
Expand Down
26 changes: 14 additions & 12 deletions src/mkpath.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,20 +119,21 @@ export async function mkpath2(ctx, { midi_input, sf2File }) {
}
},
async startAudio() {
if (ctx.state !== "running") await ctx.resume();
if (!ctx instanceof OfflineAudioContext && ctx.state !== "running")
await ctx.resume();
},
ctrl_bar(container) {
// mkdiv(
// "select",
// {
// onselect: (e) => {
// spinner.port.postMessage({ cmd: e.target.value });
// },
// placeholder: "send midi gm",
// value: null,
// },
// "cmd:|gm_reset|debug|panic".split("|").map((c) => new Option(c))
// ).attachTo(cont iner);
mkdiv(
"select",
{
onselect: (e) => {
spinner.port.postMessage({ cmd: e.target.value });
},
placeholder: "send midi gm",
value: null,
},
"cmd:|gm_reset|debug|panic".split("|").map((c) => new Option(c))
).attachTo(container);

mkdiv("label", { for: "masterGainSlider" }, "master gain").attachTo(
container
Expand Down Expand Up @@ -228,6 +229,7 @@ export async function mkpath2(ctx, { midi_input, sf2File }) {
},

bindKeyboard: function (get_active_channel_fn, eventpipe) {
if (!eventpipe) eventpipe = spinner.port;
const keys = ["a", "w", "s", "e", "d", "f", "t", "g", "y", "h", "u", "j"];
window.onkeydown = (e) => {
if (e.repeat) return;
Expand Down
1 change: 0 additions & 1 deletion src/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,6 @@ export function mkui(
for (let i = 0; i < 16; i++) {
const trackrow = new TrackUI(i, eventPipe.postMessage);
controllers.push(trackrow);
trackrow.hidden = true;
tb.append(trackrow.container);
trackrow.container.classList.add("channelCard");
trackrow.container.addEventListener(
Expand Down
Loading

0 comments on commit 34ebc0d

Please sign in to comment.