HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Split libopenmpt into separate module, add loop button

Browse source
This commit is contained in:
Essem 2023-07-09 17:30:54 -05:00
parent e4097c56d6
commit b16ee17b3f
No known key found for this signature in database
GPG key ID: 7D497397CC3A2A8C
6 changed files with 102 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/client/assets/libopenmpt.js
View file

File diff suppressed because one or more lines are too long

BIN
packages/client/assets/libopenmpt.wasm
View file

Binary file not shown.

1
packages/client/package.json
View file

@ -54,6 +54,7 @@
"insert-text-at-cursor": "0.3.0",
"json5": "2.2.3",
"katex": "0.16.7",
"libopenmpt-wasm": "github:TheEssem/libopenmpt-packaging#build",
"matter-js": "0.18.0",
"mfm-js": "0.23.3",
"photoswipe": "5.3.7",

72
packages/client/src/components/MkModPlayer.vue
View file

@ -43,6 +43,10 @@
<button class="stop" @click="stop()">
<i class="ph-stop ph-fill ph-lg"></i>
</button>
<button class="loop" @click="toggleLoop()">
<i class="ph-repeat ph-fill ph-lg" v-if="loop === -1"></i>
<i class="ph-repeat-once ph-fill ph-lg" v-else></i>
</button>
<FormRange
class="progress"
:min="0"
@ -60,6 +64,7 @@
<i class="ph-speaker-simple-high ph-fill ph-lg" v-else></i>
</button>
<FormRange
class="volume"
:min="0"
:max="1"
v-model="player.context.gain.value"
@ -138,41 +143,18 @@ let currentPattern = ref(0);
let nbChannels = ref(0);
let length = ref(1);
let muted = ref(false);
const loaded = !!window.libopenmpt;
let loop = ref(0);
onMounted(() => {
if (loaded) {
available.value = true;
player.value
.load(props.module.url)
.then((result: null) => {
buffer = result;
})
.catch((error: any) => {
console.error(error);
});
} else {
document.head
.appendChild(
Object.assign(document.createElement("script"), {
async: true,
src: "/client-assets/libopenmpt.js",
})
)
.addEventListener("load", () => {
available.value = true;
window.libopenmpt = window.Module;
player.value
.load(props.module.url)
.then((result: null) => {
buffer = result;
})
.catch((error: any) => {
console.error(error);
});
});
}
available.value = true;
player.value
.load(props.module.url)
.then((result: null) => {
buffer = result;
})
.catch((error: any) => {
console.error(error);
});
});
let currentRow = 0;
@ -216,7 +198,7 @@ function playPause() {
currentPattern.value = player.value.getPattern();
length.value = player.value.duration();
if (!isSeeking) {
position.value = player.value.position() % player.value.duration();
position.value = player.value.position();
}
requestAnimationFrame(display);
});
@ -226,21 +208,23 @@ function playPause() {
});
if (player.value.currentPlayingNode === null) {
player.value.play(buffer);
player.value.seek(position.value);
playing.value = true;
player.value.play(buffer).then(() => {
player.value.seek(position.value);
player.value.repeat(loop.value);
playing.value = true;
});
} else {
player.value.togglePause();
playing.value = !player.value.currentPlayingNode.paused;
}
}
function stop(noDisplayUpdate = false) {
async function stop(noDisplayUpdate = false) {
player.value.stop();
playing.value = false;
if (!noDisplayUpdate) {
try {
player.value.play(buffer);
await player.value.play(buffer);
display(0, true);
} catch (e) {
console.warn(e);
@ -252,6 +236,11 @@ function stop(noDisplayUpdate = false) {
player.value.clearHandlers();
}
function toggleLoop() {
loop.value = loop.value === -1 ? 0 : -1;
player.value.repeat(loop.value);
}
let savedVolume = 0;
function toggleMute() {
@ -485,6 +474,11 @@ onDeactivated(() => {
flex-grow: 1;
min-width: 0;
}
> .volume {
flex-shrink: 1;
max-width: 128px;
}
}
}

100
packages/client/src/scripts/chiptune2.ts
View file

@ -1,4 +1,4 @@
/* global libopenmpt UTF8ToString writeAsciiToMemory */
import wasm from "libopenmpt-wasm";
const ChiptuneAudioContext = window.AudioContext || window.webkitAudioContext;
@ -10,6 +10,7 @@ export function ChiptuneJsConfig(repeatCount?: number, context?: AudioContext) {
ChiptuneJsConfig.prototype.constructor = ChiptuneJsConfig;
export function ChiptuneJsPlayer(config: object) {
this.libopenmpt = null;
this.config = config;
this.audioContext = config.context || new ChiptuneAudioContext();
this.context = this.audioContext.createGain();
@ -52,20 +53,29 @@ ChiptuneJsPlayer.prototype.onError = function (handler: Function) {
};
ChiptuneJsPlayer.prototype.duration = function () {
return libopenmpt._openmpt_module_get_duration_seconds(
return this.libopenmpt._openmpt_module_get_duration_seconds(
this.currentPlayingNode.modulePtr,
);
};
ChiptuneJsPlayer.prototype.position = function () {
return libopenmpt._openmpt_module_get_position_seconds(
return this.libopenmpt._openmpt_module_get_position_seconds(
this.currentPlayingNode.modulePtr,
);
};
ChiptuneJsPlayer.prototype.repeat = function (repeatCount: number) {
if (this.currentPlayingNode) {
this.libopenmpt._openmpt_module_set_repeat_count(
this.currentPlayingNode.modulePtr,
repeatCount
);
}
};
ChiptuneJsPlayer.prototype.seek = function (position: number) {
if (this.currentPlayingNode) {
libopenmpt._openmpt_module_set_position_seconds(
this.libopenmpt._openmpt_module_set_position_seconds(
this.currentPlayingNode.modulePtr,
position,
);
@ -74,22 +84,22 @@ ChiptuneJsPlayer.prototype.seek = function (position: number) {
ChiptuneJsPlayer.prototype.metadata = function () {
const data = {};
const keys = UTF8ToString(
libopenmpt._openmpt_module_get_metadata_keys(
const keys = this.libopenmpt.UTF8ToString(
this.libopenmpt._openmpt_module_get_metadata_keys(
this.currentPlayingNode.modulePtr,
),
).split(";");
let keyNameBuffer = 0;
for (const key of keys) {
keyNameBuffer = libopenmpt._malloc(key.length + 1);
writeAsciiToMemory(key, keyNameBuffer);
data[key] = UTF8ToString(
libopenmpt._openmpt_module_get_metadata(
keyNameBuffer = this.libopenmpt._malloc(key.length + 1);
this.libopenmpt.stringToUTF8(key, keyNameBuffer);
data[key] = this.libopenmpt.UTF8ToString(
this.libopenmpt._openmpt_module_get_metadata(
this.currentPlayingNode.modulePtr,
keyNameBuffer,
),
);
libopenmpt._free(keyNameBuffer);
this.libopenmpt._free(keyNameBuffer);
}
return data;
};
@ -137,20 +147,21 @@ ChiptuneJsPlayer.prototype.load = function (input) {
});
};
ChiptuneJsPlayer.prototype.play = function (buffer: ArrayBuffer) {
ChiptuneJsPlayer.prototype.play = async function (buffer: ArrayBuffer) {
this.unlock();
this.stop();
const processNode = this.createLibopenmptNode(buffer, this.buffer);
if (processNode === null) {
return;
}
libopenmpt._openmpt_module_set_repeat_count(
processNode.modulePtr,
this.config.repeatCount || 0,
);
this.currentPlayingNode = processNode;
processNode.connect(this.context);
this.context.connect(this.audioContext.destination);
return this.createLibopenmptNode(buffer, this.buffer).then((processNode) => {
if (processNode === null) {
return;
}
this.libopenmpt._openmpt_module_set_repeat_count(
processNode.modulePtr,
this.config.repeatCount || 0,
);
this.currentPlayingNode = processNode;
processNode.connect(this.context);
this.context.connect(this.audioContext.destination);
});
};
ChiptuneJsPlayer.prototype.stop = function () {
@ -169,7 +180,7 @@ ChiptuneJsPlayer.prototype.togglePause = function () {
ChiptuneJsPlayer.prototype.getPattern = function () {
if (this.currentPlayingNode && this.currentPlayingNode.modulePtr) {
return libopenmpt._openmpt_module_get_current_pattern(
return this.libopenmpt._openmpt_module_get_current_pattern(
this.currentPlayingNode.modulePtr,
);
}
@ -178,7 +189,7 @@ ChiptuneJsPlayer.prototype.getPattern = function () {
ChiptuneJsPlayer.prototype.getRow = function () {
if (this.currentPlayingNode && this.currentPlayingNode.modulePtr) {
return libopenmpt._openmpt_module_get_current_row(
return this.libopenmpt._openmpt_module_get_current_row(
this.currentPlayingNode.modulePtr,
);
}
@ -187,7 +198,7 @@ ChiptuneJsPlayer.prototype.getRow = function () {
ChiptuneJsPlayer.prototype.getNumPatterns = function () {
if (this.currentPlayingNode && this.currentPlayingNode.modulePtr) {
return libopenmpt._openmpt_module_get_num_patterns(
return this.libopenmpt._openmpt_module_get_num_patterns(
this.currentPlayingNode.modulePtr,
);
}
@ -196,7 +207,7 @@ ChiptuneJsPlayer.prototype.getNumPatterns = function () {
ChiptuneJsPlayer.prototype.getPatternNumRows = function (pattern: number) {
if (this.currentPlayingNode && this.currentPlayingNode.modulePtr) {
return libopenmpt._openmpt_module_get_pattern_num_rows(
return this.libopenmpt._openmpt_module_get_pattern_num_rows(
this.currentPlayingNode.modulePtr,
pattern,
);
@ -210,8 +221,8 @@ ChiptuneJsPlayer.prototype.getPatternRowChannel = function (
channel: number,
) {
if (this.currentPlayingNode && this.currentPlayingNode.modulePtr) {
return UTF8ToString(
libopenmpt._openmpt_module_format_pattern_row_channel(
return this.libopenmpt.UTF8ToString(
this.libopenmpt._openmpt_module_format_pattern_row_channel(
this.currentPlayingNode.modulePtr,
pattern,
row,
@ -224,7 +235,7 @@ ChiptuneJsPlayer.prototype.getPatternRowChannel = function (
return "";
};
ChiptuneJsPlayer.prototype.createLibopenmptNode = function (
ChiptuneJsPlayer.prototype.createLibopenmptNode = async function (
buffer,
config: object,
) {
@ -232,34 +243,35 @@ ChiptuneJsPlayer.prototype.createLibopenmptNode = function (
const processNode = this.audioContext.createScriptProcessor(2048, 0, 2);
processNode.config = config;
processNode.player = this;
if (!this.libopenmpt) this.libopenmpt = await wasm();
const byteArray = new Int8Array(buffer);
const ptrToFile = libopenmpt._malloc(byteArray.byteLength);
libopenmpt.HEAPU8.set(byteArray, ptrToFile);
processNode.modulePtr = libopenmpt._openmpt_module_create_from_memory(
const ptrToFile = this.libopenmpt._malloc(byteArray.byteLength);
this.libopenmpt.HEAPU8.set(byteArray, ptrToFile);
processNode.modulePtr = this.libopenmpt._openmpt_module_create_from_memory(
ptrToFile,
byteArray.byteLength,
0,
0,
0,
);
processNode.nbChannels = libopenmpt._openmpt_module_get_num_channels(
processNode.nbChannels = this.libopenmpt._openmpt_module_get_num_channels(
processNode.modulePtr,
);
processNode.patternIndex = -1;
processNode.paused = false;
processNode.leftBufferPtr = libopenmpt._malloc(4 * maxFramesPerChunk);
processNode.rightBufferPtr = libopenmpt._malloc(4 * maxFramesPerChunk);
processNode.leftBufferPtr = this.libopenmpt._malloc(4 * maxFramesPerChunk);
processNode.rightBufferPtr = this.libopenmpt._malloc(4 * maxFramesPerChunk);
processNode.cleanup = function () {
if (this.modulePtr !== 0) {
libopenmpt._openmpt_module_destroy(this.modulePtr);
processNode.player.libopenmpt._openmpt_module_destroy(this.modulePtr);
this.modulePtr = 0;
}
if (this.leftBufferPtr !== 0) {
libopenmpt._free(this.leftBufferPtr);
processNode.player.libopenmpt._free(this.leftBufferPtr);
this.leftBufferPtr = 0;
}
if (this.rightBufferPtr !== 0) {
libopenmpt._free(this.rightBufferPtr);
processNode.player.libopenmpt._free(this.rightBufferPtr);
this.rightBufferPtr = 0;
}
};
@ -300,10 +312,10 @@ ChiptuneJsPlayer.prototype.createLibopenmptNode = function (
let ended = false;
let error = false;
const currentPattern = libopenmpt._openmpt_module_get_current_pattern(
const currentPattern = processNode.player.libopenmpt._openmpt_module_get_current_pattern(
this.modulePtr,
);
const currentRow = libopenmpt._openmpt_module_get_current_row(
const currentRow = processNode.player.libopenmpt._openmpt_module_get_current_row(
this.modulePtr,
);
if (currentPattern !== this.patternIndex) {
@ -313,7 +325,7 @@ ChiptuneJsPlayer.prototype.createLibopenmptNode = function (
while (framesToRender > 0) {
const framesPerChunk = Math.min(framesToRender, maxFramesPerChunk);
const actualFramesPerChunk = libopenmpt._openmpt_module_read_float_stereo(
const actualFramesPerChunk = processNode.player.libopenmpt._openmpt_module_read_float_stereo(
this.modulePtr,
this.context.sampleRate,
framesPerChunk,
@ -325,11 +337,11 @@ ChiptuneJsPlayer.prototype.createLibopenmptNode = function (
// modulePtr will be 0 on openmpt: error: openmpt_module_read_float_stereo: ERROR: module * not valid or other openmpt error
error = !this.modulePtr;
}
const rawAudioLeft = libopenmpt.HEAPF32.subarray(
const rawAudioLeft = processNode.player.libopenmpt.HEAPF32.subarray(
this.leftBufferPtr / 4,
this.leftBufferPtr / 4 + actualFramesPerChunk,
);
const rawAudioRight = libopenmpt.HEAPF32.subarray(
const rawAudioRight = processNode.player.libopenmpt.HEAPF32.subarray(
this.rightBufferPtr / 4,
this.rightBufferPtr / 4 + actualFramesPerChunk,
);

15
pnpm-lock.yaml
View file

@ -789,7 +789,7 @@ importers:
version: 2.30.0
emojilib:
specifier: github:thatonecalculator/emojilib
version: github.com/thatonecalculator/emojilib/9d16541664dc8fef3201ae9b647477070676a52e
version: github.com/thatonecalculator/emojilib/15fd9504f943763a057ff803ee2009ec0524c96b
escape-regexp:
specifier: 0.0.1
version: 0.0.1
@ -817,6 +817,9 @@ importers:
katex:
specifier: 0.16.7
version: 0.16.7
libopenmpt-wasm:
specifier: github:TheEssem/libopenmpt-packaging#build
version: github.com/TheEssem/libopenmpt-packaging/d05d151a72b638c6312227af0417aca69521172c
matter-js:
specifier: 0.18.0
version: 0.18.0
@ -17411,6 +17414,12 @@ packages:
resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
dev: false
github.com/TheEssem/libopenmpt-packaging/d05d151a72b638c6312227af0417aca69521172c:
resolution: {tarball: https://codeload.github.com/TheEssem/libopenmpt-packaging/tar.gz/d05d151a72b638c6312227af0417aca69521172c}
name: libopenmpt-wasm
version: 0.7.2
dev: true
github.com/misskey-dev/browser-image-resizer/56f504427ad7f6500e141a6d9f3aee42023d7f3e:
resolution: {tarball: https://codeload.github.com/misskey-dev/browser-image-resizer/tar.gz/56f504427ad7f6500e141a6d9f3aee42023d7f3e}
name: browser-image-resizer
@ -17429,8 +17438,8 @@ packages:
url-polyfill: 1.1.12
dev: true
github.com/thatonecalculator/emojilib/9d16541664dc8fef3201ae9b647477070676a52e:
resolution: {tarball: https://codeload.github.com/thatonecalculator/emojilib/tar.gz/9d16541664dc8fef3201ae9b647477070676a52e}
github.com/thatonecalculator/emojilib/15fd9504f943763a057ff803ee2009ec0524c96b:
resolution: {tarball: https://codeload.github.com/thatonecalculator/emojilib/tar.gz/15fd9504f943763a057ff803ee2009ec0524c96b}
name: emojilib
version: 3.0.10
dev: true