s-d-m / lilyplayer-web

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Lilyplayer-web

If you are interested in lilyplayer, you can see its code at https://github.com/s-d-m/lilyplayer .

If you want a live demo, in your browser, you can use it at https://lilyplayer.shuttleapp.rs/

It takes some time to load as it downloads about 20MiB at the start.

Once loaded, click, "input", then "select file". Suitable files for the application are available at https://github.com/s-d-m/precompiled_music_sheets_for_lilyplayer . Simply download music sheets you like from there.

Why this repository?

I ported Lilyplayer to Webassembly to make it usable directly in the browser1. Initially, I planned to simply host the html files on a repository here, to make the web app easily available at no cost (for me). However, the app uses threads, which is restricted to websites with cross site isolation only. Browsers (firefox, chrome, ...) know if a website should run in cross site isolation mode or not based on http headers2 sent by the web server when accessing the main html page. And the webserver powering github does not provide these headers. Sadly, I couldn't find any hosting platform letting me host static files for free and whose webserver were setting those headers. However, I came across shuttle.rs which is a platform letting me run a webserver I control. Consequently, I made my toy web-server which only serves the files required to run lilyplayer and set those magic http headers.

This repository contains the code of that webserver. The assets (i.e. html and javascript files) are in the assets folder

How to build the webserver and run the app locally

  1. Git clone this repository
  2. install the rust toolchain according to https://www.rust-lang.org/tools/install
  3. run cargo install shuttle in this directory
  4. run cargo shuttle run

The app will be accessible at http://localhost:8000

Footnotes

  1. Note that the native app provides a nicer user experience.

  2. The headers are: "Cross-Origin-Opener-Policy" and "Cross-Origin-Embedder-Policy". They must to set to "same-origin" and "require-corp" respectively

About


Languages

Language:JavaScript 86.6%Language:HTML 13.0%Language:Rust 0.4%