Description
Please confirm the following points:
- This question is NOT about the Android apps in the Play Store
- I have searched the project page to check if the question was already asked elsewhere
Topic
Development and Contributing
Your Request
Im looking to adapt this for web use
was able to get butterchurn setup
https://azmanagedit.net/product/wordpress-butterchurn-audio-visualizer/
Sounds like theres is an option to run ProjectM in a browser via WebAssembly, which makes it usable on websites.
Option 1: WebAssembly Version
- WebAssembly enables ProjectM to run in a browser, rendering MilkDrop presets via WebGL.
What's Needed?
- A WebAssembly-compatible build of ProjectM (projectm.js and projectm.wasm).
- MilkDrop presets for visualization.
- JavaScript code to handle the audio source and attach it to the visualization.
Creating a WebAssembly-compatible build of ProjectM involves compiling its C++ codebase into WebAssembly using a toolchain like Emscripten.
+===+
Imported Docker Image
Step 1: Clone the ProjectM Repository
Clone the ProjectM source code into the container:
git clone https://github.com/projectM-visualizer/projectm.git
Navigate to the projectm directory:
cd projectm
Step 2: Create a Build Directory
To keep the build files separate from the source files, create a build directory and navigate into it:
mkdir build
cd build
Step 3: Configure the Build
Use Emscripten’s CMake wrapper (emcmake) to configure the build for WebAssembly:
emcmake cmake ..
This command sets up the build system to use Emscripten as the toolchain.
it appears that CMake is encountering an issue related to the projectM-Eval package or module, which is required for the build. This issue happens because the necessary configuration files for projectM-Eval cannot be found in the expected locations.
The error indicates that the projectm-eval directory under /src/projectm/vendor/ is missing the necessary CMakeLists.txt file, which is required for the build process. This likely means that the submodule or dependency for projectm-eval wasn’t cloned properly.
Step 1: Initialize and Update Submodules
Navigate to the root of the ProjectM repository:
cd /src/projectm
Initialize and update all submodules:
git submodule update --init --recursive
Step 2: Verify Submodule Directory
After updating submodules, verify that the projectm-eval directory contains a CMakeLists.txt file:
ls vendor/projectm-eval
Step 3: Retry the Build Configuration
Once the submodule is correctly set up, rerun the emcmake cmake .. command from the build directory:
cd /src/projectm/build
emcmake cmake ..
If this completes successfully, proceed with the build:
Next Steps: Compile the Code
Now, you need to build the project using the emmake command. Here’s how to proceed:
Run the Build Command: In the build directory, run:
emmake make
Monitor the Output:
The build process may take a few minutes, depending on the complexity of the code and your system resources.
Look for any errors or warnings during the process. If you encounter errors, take note of them so we can troubleshoot.
Check the Output: After the build completes, check the build directory for the following files:
projectm.js: JavaScript glue code for WebAssembly.
projectm.wasm: The WebAssembly binary.
Any additional runtime or configuration files needed.
You can verify the files are present by running:
ls
Testing the Output
Once the build is successful, you can:
it seems that while the build has successfully completed, the expected output files (projectm.js and projectm.wasm) are not present in the build directory. This indicates that either:
The build configuration didn't produce the WebAssembly artifacts.
Some additional steps are needed to generate the WebAssembly files.
Copy the generated files (.js and .wasm) to your host machine using:
docker cp naughty_faraday:/src/projectm/build/projectm.js .
docker cp naughty_faraday:/src/projectm/build/projectm.wasm .
Serve these files using a simple local web server and create an HTML file to test them.
Confirm WebAssembly Support in ProjectM
Before proceeding further, check if the ProjectM repository explicitly supports WebAssembly. Inside the main source directory (/src/projectm), search for mentions of WebAssembly or Emscripten in the codebase:
grep -ri "EMSCRIPTEN" /src/projectm
Steps to Replicate the Workflow
Install Required Packages
Run the following commands inside your Docker container to ensure all dependencies are installed:
apt-get update
apt-get install -y libgl1-mesa-dev mesa-common-dev libsdl2-dev libglu1-mesa-dev ninja-build
Sorry to much to add here.
Im about to Verify that wrapper.js and wrapper.wasm