pico-pixel-player

← Back to log @ 47b4a8a

add aac & vorbis/webm, add option to force full transcoding

AuthorKonata <konata@posteo.jp>

Date2025-04-17 16:26:05 UTC

Commit47b4a8a0dd02c64e2fb55c05c3c745be01158c61

7 files changed, 60 insertions(+), 8 deletions(-)

▾Mserver/src/index.ts

+20-2@ 47b4a8a @ master

@@ -121,9 +121,27 @@ const app = setup

const { cmd, mimeType } = convertWithFFmpeg(filePath, bitrate, query.format ?? MediaFormat["opus/ogg"]);

request.signal.addEventListener("abort", () => cmd.kill("SIGKILL"));

set.headers["content-type"] = mimeType;

return new Response(cmd.stdout);

if (query.disableChunkedTranscoding) {

console.log("Here")

const chunks: Uint8Array[] = [];

for await (const chunk of cmd.stdout) {

chunks.push(chunk);

}

const full = new Uint8Array(chunks.reduce((acc, val) => acc + val.length, 0));

let offset = 0;

for (const chunk of chunks) {

full.set(chunk, offset);

offset += chunk.length;

}

return full;

}

return cmd.stdout;

},

{

query: t.Optional(

t.Object({ bitrate: t.Number(), format: t.Enum(MediaFormat), disableChunkedTranscoding: t.Boolean() }),

),

},

{ query: t.Optional(t.Object({ bitrate: t.Number(), format: t.Enum(MediaFormat) })) },

)

.get(

"/list/*",

▾Mserver/src/utils.ts

+16-2@ 47b4a8a @ master

@@ -160,6 +160,7 @@ export function convertWithFFmpeg(filePath: string, bitrate: number, format: Med

let codec = undefined;

let container = undefined;

let mimeType = undefined;

let flags: string[] = [];

switch (format) {

case MediaFormat["opus/ogg"]: {

codec = "libopus";

@@ -179,18 +180,31 @@ export function convertWithFFmpeg(filePath: string, bitrate: number, format: Med

mimeType = "audio/mpeg";

break;

}

case MediaFormat.vorbis: {

case MediaFormat["vorbis/ogg"]: {

codec = "libvorbis";

container = "ogg";

mimeType = 'audio/ogg; codecs="vorbis"';

break;

}

case MediaFormat["vorbis/webm"]: {

codec = "libvorbis";

container = "webm";

mimeType = 'audio/webm; codecs="vorbis"';

break;

}

case MediaFormat.aac: {

codec = "libfdk_aac";

container = "mp4";

mimeType = "audio/aac";

flags = ["-movflags", "frag_keyframe+empty_moov"];

break;

}

default: {

throw new Error(`Unsupported format: ${format}`);

}

}

const cmd = Bun.spawn(

["ffmpeg", "-i", filePath, "-vn", "-c:a", codec, "-f", container, "-b:a", bitrate.toString(), "-"],

["ffmpeg", "-i", filePath, "-vn", "-c:a", codec, "-f", container, "-b:a", bitrate.toString(), ...flags, "-"],

{

stdin: "ignore",

stdout: "pipe",

▾Mshared/types.ts

+3-1@ 47b4a8a @ master

@@ -31,5 +31,7 @@ export enum MediaFormat {

"opus/ogg" = "opus/ogg",

"opus/webm" = "opus/webm",

mp3 = "mp3",

vorbis = "vorbis",

"vorbis/ogg" = "vorbis/ogg",

"vorbis/webm" = "vorbis/webm",

aac = "aac",

}

▾Mwebclient/src/App.tsx

+4@ 47b4a8a @ master

@@ -12,8 +12,11 @@ import { MediaFormat } from "music-server-shared/types";

import PlaylistManager from "./components/PlaylistManager";

import { BUILD_HASH } from "./build-info";

//TODO: change download actions?

//TODO: AAC support

//TODO: search

//TODO: remember scroll position for parent directories

//TODO: merge fileblobs and filemetadata, try putting signals in the onlinetree

//TODO: fix touch highlighting in playlist

//TODO: better touch controls?

//TODO: Add documentation to functions

@@ -42,6 +45,7 @@ const App: Component = () => {

const [options, setOptions] = createSignal<AppOptions>({

bitrate: 128000,

enableTranscoding: true,

disableChunkedTranscoding: false,

maxTranscodes: 4,

maxDownloads: 2,

rememberDir: false,

▾Mwebclient/src/components/OptionsModal.tsx

+12-1@ 47b4a8a @ master

@@ -71,6 +71,15 @@ export default function OptionsModal(props: OptionsModalProps) {

onChange={(e) => setNewOptions({ ...newOptions(), enableTranscoding: e.target.checked })}

/>

</div>

<div>

<label for="transcoding-buffer-checkbox">Disable chunked transcoding:</label>

<input

id="transcoding-buffer-checkbox"

type="checkbox"

checked={newOptions()?.disableChunkedTranscoding}

onChange={(e) => setNewOptions({ ...newOptions(), disableChunkedTranscoding: e.target.checked })}

/>

</div>

<div>

<label for="bitrate-select">Bitrate:</label>

<select

@@ -109,7 +118,9 @@ export default function OptionsModal(props: OptionsModalProps) {

<option>{MediaFormat["opus/ogg"]}</option>

<option>{MediaFormat["opus/webm"]}</option>

<option>{MediaFormat.mp3}</option>

<option>{MediaFormat.vorbis}</option>

<option>{MediaFormat["vorbis/ogg"]}</option>

<option>{MediaFormat["vorbis/webm"]}</option>

<option>{MediaFormat.aac}</option>

</select>

</div>

<div>

▾Mwebclient/src/offline.ts

+4-2@ 47b4a8a @ master

@@ -204,7 +204,7 @@ export async function getSrc(path: string, options: AppOptions, offline: boolean

return undefined;

}

if (options.enableTranscoding) {

return `${joinPath("/transcode", path)}?bitrate=${options.bitrate}&format=${options.format}`;

return `${joinPath("/transcode", path)}?bitrate=${options.bitrate}&format=${options.format}&disableChunkedTranscoding=${options.disableChunkedTranscoding}`;

}

return joinPath("/download", path);

}

@@ -282,7 +282,9 @@ async function downloadFile(

await downloadSemaphore.acquire();

let res: Response;

if (options.enableTranscoding) {

res = await fetch(`${joinPath("/transcode", path)}?bitrate=${options.bitrate}&format=${options.format}`);

res = await fetch(

`${joinPath("/transcode", path)}?bitrate=${options.bitrate}&format=${options.format}&disableChunkedTranscoding=${options.disableChunkedTranscoding}`,

);

} else {

res = await fetch(joinPath("/download", path));

}

▾Mwebclient/src/types.ts

+1@ 47b4a8a @ master

@@ -29,6 +29,7 @@ export interface AppOptions {

bitrate: number;

format: MediaFormat;

enableTranscoding: boolean;

disableChunkedTranscoding: boolean;

maxTranscodes: number;

maxDownloads: number;

rememberDir: boolean;