jasonnor / th-music-video-generator

Touhou Project random music video generator/player, crawling image and video from websites to generate MV.

Touhou Project Music-Video Generator

Touhou Project random music video generator/player, crawling image and video from websites to generate MV. (WIP)

Feature

• Random images and video mixture
• Mobile friendly
• Highly controllable MV generation options
• Totally open json database
• Full ❤️ of Touhou Project!

Preview

The pid below title is Pixiv ID, and the vid is YouTube ID. You can click them to visit source of image/video! 😉

Tablet

Desktop

Mobile

Menu

Video

Random Play Option

MV Generation Behavior (New!)

Chorus-Only Mode & Audio Waveform Option (New!)

Contributing

The Chorus-Only mode take a lot of time to be done, I need your help. Reply to provide the time of the chorus (It can be the best part you think in the song, because the best melody of Touhou songs may appear in verse instead of chorus), or reply on the issue page.

Time of the chorus after 東方天空璋 has not been done. The latest progress can be found here.

Please feel free to open issues or submit pull requests.

We have a known bugs list here!

Special Thanks / Contributors

Huge thanks to our great contributors who contributed to Touhou Project Music-Video Generator.

latious

Latious spent a lot of time completing the chorus time of songs from 永夜抄 to 天空璋.

Which helps us enjoy the beautiful and wonderful melodies from many Touhou songs! 🥰

hemi

Hemi, a skilled JS developer, fixed the background fade-in problem that bothered me for a long time, and brought us strong multi-language support!

Anyone who speaks languages other than Japanese will benefit greatly. 😍

Reference

• 上海アリス幻樂団
• howler.js - https://howlerjs.com/
• Plyr - https://github.com/sampotts/plyr
• Firebase - https://firebase.google.com/
• Pure - https://purecss.io/
• Font Awesome - https://fontawesome.com/
• vudio.js - https://github.com/margox/vudio.js
• wavesurfer.js - https://wavesurfer-js.org/

License

Touhou Project Music-Video Generator is released under the Apache License. See the LICENSE file for details.

th-music-video-generator's Issues

Todo: High quality character images crawling

Crawl from pixiv which have 1~5k+ favorites. File name as pixiv ID.

Path: /images/characterName/*

Format of characterName must same as db.

Done: Characters of 旧作 ~ 東方妖々夢.

Todo: Refrain/Chorus Mode

Play song only on refrain, then switch to next one.
Maybe manual tagging on db.json or other better automated methods. 🤔

Random play looks like not so "random"

Maybe should random sort song list and play instead of get random song every time play to next song.

Feature: Add new music and image of new Touhou series

• 秘封ナイトメアダイアリー
• 東方鬼形獣
• 東方剛欲異聞
• 東方虹龍洞

Originally posted by @Jasonnor in #25 (comment)

Todo: Setting of Playing Behavior

e.g., Show x images y seconds then show video.

e.g., Video start time at n seconds or at half of duration or random time.

When fading from image to video, video flashes temporarily before fading in

Optimize image preloading

Read image to display at stage 0 as object.

Player Window Size Option

Maybe 50% ~ 100%, hidden in mobile.

Custom Playlist

Of course shareable is better!

Favorite Songs List

Save to web storage or cookies, and show favorite songs at top of playlist.

Todo: Audio Wave

See https://github.com/goldfire/howler.js/tree/master/examples/sprite. (It is just image effect)

Long-term: Chorus time for every song

Need help of providing chorus-section time for each song, as chorus_start_time and chorus_end_time below:

        {
          "name": "8.夢消失　～ Lost Dream.mp3",
          "path": "/audio/th03/8.夢消失　～ Lost Dream.mp3",
          "character": "カナ・アナベラル",
          "video_id": "wG4RaB7BB0A",
          "time": 0,
          "chorus_start_time": 51,
          "chorus_end_time": 128
        },

Time range is about 40 ~ 100 sec, and chorus-section can be the best part you think in the song (because the best melody of Touhou songs may appear in verse instead of chorus).
This will take a lot of time to be done, I need your help. 😋
You can commit to this file or give the chorus-section time of song in the issue. Thanks!

Todo: Show series name & image/video source below title

e.g., Subtitle:

東方永夜抄
pid=(image source) ;When image showing
vid=(youtube source) ;When video playing

Chore: Set default animated waveform as false

Default uses non-animated waveform to improve website performance.

Music song numbers off

see this comment on how this will make #13 easier to implement

edit: list:

• th01
• th02
• th03
• th04
• th05
• th06
• th07
• th07.5
• th08
• th09
• th09.5
• th10
• th10.5
• th11
• th12
• th12.3
• th12.5
• th12.8
• th13
• th13.5
• th14
• th14.3
• th14.5
• th15
• th15.5
• th16

Todo: Audio Wave Animated Option

[Feature Request] Multi language support

Could add i18n support for MV Generator UI or translations for each tracks. Thanks!

Optimize image display ratio

For example, a 9:16 image in a 16:9 viewport will be cropped to the remaining middle part in the current display mode.

Like this:

Would think of a way to optimize the display of images with too large window ratio gaps. At the same time maintain the existing display method of similar scale.

Known Bugs List

• When changing song in 12 seconds, image & video of previous song still display. (And it will be replace by new image or video in seconds.) (Resolved by e44808f)
• Play next song to playlist sub-tittle occurs error. (Resolved by b3dcdfd)
• Play too much song will make player broken. (Play button will show as loading and music won't play.) (Resolved by bcc6e6d)
• Clicking on wave to change time several times occurs error. (Pause then play will make it work normally) (Resolved by 5895fdf)
• Avoid changing to duplicate images Moved to #36
• Google custom search API day limited (No needed anymore now)
• Fade-in flicker issue from image to video (Resolved by #39 )
• Resize window make audio wave broken.
• More ...

Broken Video List

Please provide the song name if you find that the video link is invalid.

• 花映塚　～ Higan Retour（東方花映塚）
• 上海紅茶館　～ Chinese Tea（東方非想天則）

Q: Where are video data placed?
A: #35 (comment)

Bugfix: Avoid changing to duplicate images

Just random sort image list and play them in order.

Todo: Update music information

The music belongs to the theme of the character and its gameplay video id or keyword, e.g.,

        {
          "name": "16.不思議の国のアリス.mp3",
          "path": "/audio/th05/16.不思議の国のアリス.mp3",
          "character": "ロリス",
          "video_id": "FFDXkbCGgb4",
          "time": 79
        }
        {
          "name": "03. 妖魔夜行.mp3",
          "path": "/audio/th06/03. 妖魔夜行.mp3",
          "character": "ルーミア",
          "keyword": "東方紅魔郷 LUNATIC stage1 BOSS"
        }

https://github.com/Jasonnor/th-music-video-generator/blob/gh-pages/scripts/th-song.json

Update: ALL done.

Make back button go to beginning of current song if playthrough is past 3 seconds

Otherwise go to previous song. Cool project btw!

Images auto crawling

For new good images from pixiv or twitter.

Audio Player Option: Repeat

• Random play(shuffle)
• Repeat
• URL song setter/getter

Todo: URL parser for set song info by GET

Also change URL when switch song.

Avoid background image fade in also fade other component

when the image fades into another image, everything else fades with the image

especially obvious when the menu is open and image changes

Docs: Create Contributors / special thanks tab in README

For thanking contributors :)

Ref: https://raw.githubusercontent.com/marktext/marktext/develop/README.md

What is the protocol for getting audio?

i.e. what is the best practice (if any) for getting the audio from the newer games?