Bemuse server: Images, BGA, music preview

This post is for people who runs Bemuse servers.

Bemuse does not support normal BMS image tags. But it supports:

- **Eyecatch image** (1280x720 PNG)
- **Background image** (1280x720 PNG)
- **Preview music** (MP3)
- **BGA** (720p WebM/MP4)


# Why not support normal BMS tags?

The formats usually used in BMS is not suitable for web consumption.

- Eyecatch images `#STAGEFILE` and background images `#BACKBMP` are usually BMP files.
- BGA are usually WMV, MPG, and AVI files. These file types are proprietary and not widely supported on web browsers.


## Bemuse’s limitations

- These images, movies and previews are **per-song.** All BMS files will use the same image.

# Let’s customize Bemuse server!

For this example, I am going to use [LeaF’s song about flower](http://manbow.nothing.sh/event/event.cgi?action=More_def&num=524&event=110).

At first, the server looks like this:

![Screen Shot 2017-10-17 at 23.36.28.png](https://qiita-image-store.s3.amazonaws.com/0/80627/7dd5b815-ac93-31ff-bfc9-e4046561c7cc.png)

## Add an eyecatch image

Add a file named `eyecatch_image.png`.

![Screen Shot 2017-10-17 at 23.39.12.png](https://qiita-image-store.s3.amazonaws.com/0/80627/558d70ba-0def-9b70-6a53-8b6f4a15eac2.png)

Bemuse will now display an eyecatch image while loading song.

![Screen Shot 2017-10-17 at 23.41.06.png](https://qiita-image-store.s3.amazonaws.com/0/80627/9076fb67-4934-6df5-399a-257a80051b49.png)

## Add a background image

Add a file named `back_image.png`.

![Screen Shot 2017-10-17 at 23.44.10.png](https://qiita-image-store.s3.amazonaws.com/0/80627/5be84824-fd1d-2da4-2854-34bbb8296633.png)

Bemuse will now display an background image when playing.

![Screen Shot 2017-10-17 at 23.45.44 copy.png](https://qiita-image-store.s3.amazonaws.com/0/80627/36f58497-0027-5154-e2c5-e5e23e37207c.png)

## Add a BGA

Add a BGA file:

![Screen Shot 2017-10-17 at 23.47.32.png](https://qiita-image-store.s3.amazonaws.com/0/80627/a1e9a7a9-76d9-388f-c0d5-6ec5989753a0.png)

Create a text file called `README.md`.

![Screen Shot 2017-10-17 at 23.55.52.png](https://qiita-image-store.s3.amazonaws.com/0/80627/ee7bbcad-76b3-526c-425c-9d1c5bbe40bb.png)

And put in:

```
---
video_file: BGA.mp4
video_offset: 1.268
---
```

* `video_file` is the name of your video file.
* `video_offset` is when to start playing the video.

Save the file and run `bemuse-tools index` again.

Refresh the game (you may have to clear the cache). BGA should work now!

<img alt="Screen Shot 2017-10-18 at 0.00.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/80627/895e12c4-c9e8-351f-9995-ab7ba72a40bb.png">

**Note:** I recommend using the WebM format with size 1280x720 and bitrate of 2000kbps.


## Add a preview music

1. Convert the BMS into a WAV file (don’t forget to normalize to prevent clipping).

2. Use **Audacity** with [**ReplayGain Plugin**](https://forum.audacityteam.org/viewtopic.php?f=42&t=63067).

3. Open the WAV file in Audacity.

4. **Effect** &rarr; **ReplayGain** &rarr; **Normalize** with adjusted output of 4 dB.

    ![Screen Shot 2017-10-18 at 0.11.58.png](https://qiita-image-store.s3.amazonaws.com/0/80627/38428230-f0cd-9950-508f-8cc5a18c19c2.png)

5. Cut the track to 30 seconds.

6. Apply **Fade in** at to the first 0.5 seconds.

7. Apply **Fade out** at the last 3 seconds.

    ![Screen Shot 2017-10-18 at 0.15.05.png](https://qiita-image-store.s3.amazonaws.com/0/80627/3fc8a687-b662-8aa6-7c54-fedccb7d084c.png)

8. Export the file to `_bemuse_preview.mp3` with bitrate of 128kbps.

    ![Screen Shot 2017-10-18 at 0.17.38.png](https://qiita-image-store.s3.amazonaws.com/0/80627/e8b82a14-213f-0b2b-c881-c479e896406a.png)

Now, you should hear the music preview!