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", "insert-text-at-cursor": "0.3.0",
"json5": "2.2.3", "json5": "2.2.3",
"katex": "0.16.7", "katex": "0.16.7",
"libopenmpt-wasm": "github:TheEssem/libopenmpt-packaging#build",
"matter-js": "0.18.0", "matter-js": "0.18.0",
"mfm-js": "0.23.3", "mfm-js": "0.23.3",
"photoswipe": "5.3.7", "photoswipe": "5.3.7",

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

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

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

15
pnpm-lock.yaml
View file

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