Add web build support with custom shell HTML

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-04-12 21:28:18 -07:00
parent ecbbba36db
commit da37cecb59
3 changed files with 310 additions and 51 deletions
@@ -0,0 +1,74 @@
+#!/bin/bash
+# Build spectrogram viewer for the web using Emscripten
+# Usage: ./build_web.sh [debug|release]
+
+set -e
+
+# Get script directory (project root)
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+cd "$SCRIPT_DIR"
+
+BUILD_TYPE=${1:-release}
+RAYLIB_DIR="$SCRIPT_DIR/build/external/raylib-master"
+SRC_DIR="$SCRIPT_DIR/src"
+BUILD_DIR="$SCRIPT_DIR/bin/web"
+RAYLIB_BUILD="$BUILD_DIR/raylib_build"
+OUTPUT="$BUILD_DIR/rspektrum.html"
+
+# Create build directories
+mkdir -p "$BUILD_DIR" "$RAYLIB_BUILD"
+
+echo "=== Building Spectrogram Viewer for Web ($BUILD_TYPE) ==="
+echo "Raylib dir: $RAYLIB_DIR"
+
+# Common compile flags for raylib
+RAYLIB_CFLAGS="-Os -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2"
+if [ "$BUILD_TYPE" = "debug" ]; then
+    RAYLIB_CFLAGS="-g -O0 -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2"
+fi
+
+echo "=== Step 1: Compiling raylib for web ==="
+
+# Compile raylib source files
+emcc -c "$RAYLIB_DIR/src/rcore.c" $RAYLIB_CFLAGS -o "$RAYLIB_BUILD/rcore.o"
+emcc -c "$RAYLIB_DIR/src/rshapes.c" $RAYLIB_CFLAGS -o "$RAYLIB_BUILD/rshapes.o"
+emcc -c "$RAYLIB_DIR/src/rtextures.c" $RAYLIB_CFLAGS -o "$RAYLIB_BUILD/rtextures.o"
+emcc -c "$RAYLIB_DIR/src/rtext.c" $RAYLIB_CFLAGS -o "$RAYLIB_BUILD/rtext.o"
+emcc -c "$RAYLIB_DIR/src/rmodels.c" $RAYLIB_CFLAGS -o "$RAYLIB_BUILD/rmodels.o"
+emcc -c "$RAYLIB_DIR/src/raudio.c" $RAYLIB_CFLAGS -o "$RAYLIB_BUILD/raudio.o"
+
+# Create static library
+cd "$RAYLIB_BUILD"
+emar rcs libraylib.a rcore.o rshapes.o rtextures.o rtext.o rmodels.o raudio.o
+cd "$SCRIPT_DIR"
+
+echo "=== Step 2: Compiling spectrogram for web ==="
+cd "$SCRIPT_DIR"
+
+# Linker flags
+LDFLAGS="-s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 --preload-file resources@resources --shell-file $SCRIPT_DIR/web_shell.html -s NO_EXIT_RUNTIME=1"
+
+if [ "$BUILD_TYPE" = "debug" ]; then
+    LDFLAGS="$LDFLAGS -g -O0 -s ASSERTIONS=1"
+else
+    LDFLAGS="$LDFLAGS -O2"
+fi
+
+# Compile and link
+emcc -o "$OUTPUT" \
+    "$SRC_DIR/spectrogram.c" \
+    -I"$RAYLIB_DIR/src" \
+    -I"$RAYLIB_DIR/src/external" \
+    -I"$RAYLIB_DIR/src/external/glfw/include" \
+    -Iinclude \
+    -DPLATFORM_WEB \
+    "$RAYLIB_BUILD/libraylib.a" \
+    $LDFLAGS
+
+echo ""
+echo "=== Build complete ==="
+echo "Output: $OUTPUT"
+echo ""
+echo "To test locally, run:"
+echo "  cd $BUILD_DIR && python3 -m http.server 8080"
+echo "Then open http://localhost:8080/rspektrum.html in your browser"