[文花] 自製東方原曲MV線上生成播放器

作者: Jasonnor (Jasonnor)   2018-09-08 23:26:33
連結:https://jasonnor.github.io/th-music-video-generator/
項目開源地址:https://github.com/Jasonnor/th-music-video-generator
好讀版:https://www.ptt.cc/bbs/Touhou/M.1536420407.A.723.html
最近想做個東方原曲個人向Top50,編排MV過程中,覺得部分元素可以自動化產生(例如進場配圖、遊戲畫面皆能爬蟲取得),而且比較少有同時包含配圖和彈幕畫面的原曲MV(個人認為彈幕也是欣賞東方原曲不可缺少的要素之一),於是萌生了這個項目的概念
https://github.com/Jasonnor/th-music-video-generator/raw/master/images/demo/main.gif
基本想法是曲子開始後,先顯示兩張隨機圖片,每張各6秒,之後無縫接上遊戲對應的關卡影片,中間皆以淡入淡出來轉場。事前我先建立了簡單的資料庫,包含了曲名、對應角色(標籤)和關卡等,根據標籤從pixiv爬好並篩選了近兩千張高收藏數的作品,使用Google Data API來爬Youtube上的遊戲影片ID,之後逐漸完善播放器和生成邏輯。目前成品Demo(加速版)如上圖。
標題下面會標明該曲所屬的系列以及當前顯示作品的Pixiv ID或Youtube ID,另外本項目支援行動裝置使用,下圖為平板環境:
https://i.imgur.com/8GNb6Yz.jpg
電腦環境:
https://i.imgur.com/U58beN9.jpg
手機環境為了降低運算資源,會把音頻波型動畫改為靜態波型(未來會改為可設定):
https://i.imgur.com/yEeA5eH.png
https://i.imgur.com/m4SprNd.png
遊戲剪影的播放清單(未來會增加收藏功能,顯示已收藏曲在上方):
https://i.imgur.com/UjGbizi.png
MV中遊戲彈幕展示:
https://media.giphy.com/media/3kv7BpMHWbM8ntNhwB/giphy.gif
本項目開源於Github(https://github.com/Jasonnor/th-music-video-generator),未來也將繼續擴充更新,喜歡的話給個Star我會很開心 XD
使用中遇到問題也歡迎在Github提出issues或PR協助這個項目,已知Bug清單在這裡可以查看:https://github.com/Jasonnor/th-music-video-generator/issues/5
作者: freedom5487 (Q太郎)   2018-09-09 00:08:00
推,真的太神啦
作者: Tsozuo   2018-09-09 02:25:00
好酷的東西 推推
作者: latious (Eta Carinae)   2018-09-09 06:14:00
wow推推 感謝分享
作者: LillyWhite (桃李不語下自成蹊)   2018-09-09 12:12:00
左下角選項可以選曲 圖是Jasonnor桑的收藏嗎?讚讚! 搭配起來很有氣氛!
作者: youtien (恆萃工坊)   2018-09-09 14:20:00
厲害!請問可以轉載嗎?
作者: WoodPunch (木頭拳)   2018-09-09 14:24:00
推推
作者: wlsh5701 (舞林樹枝)   2018-09-09 14:30:00
作者: samex4x4 (Same)   2018-09-09 15:38:00
推推!! 太厲害了
作者: LillyWhite (桃李不語下自成蹊)   2018-09-09 17:30:00
(原來原文中就有解釋了 是我漏看 感到抱歉 Orz)因為接連點了幾首歌 發現圖都很精美! ( >////<)b
作者: freedom5487 (Q太郎)   2018-09-09 18:56:00
轉到C_chat吧
作者: NightDream08 (夜夢ND)   2018-09-14 12:44:00
作者: wayneshih (漂流虛海的雁太保)   2018-09-15 22:26:00
這..好東西啊
作者: j456789a (nightforce)   2018-09-17 13:15:00
神神神神神
作者: sarsman (DeNT15T♠)   2018-10-16 22:47:00

Links booklink

Contact Us: admin [ a t ] ucptt.com