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

[Jasonnor (Jasonnor)]

連結：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

--------------

2018/09/10 更新

https://i.imgur.com/CmHcrYl.jpg

1. 加入了隨機播放的功能，點擊右下角齒輪即可設定

2. 現在可以點擊曲名下面的pid/vid直接前往原圖/影片網址囉！

--------------

2018/09/11 更新

https://i.imgur.com/TtJsTnQ.png

1. 新增自定義MV生成選項，可以設定MV中圖片的數量和每張持續時間

2. 新增網址選曲功能，播放後會在網址加上曲目編號，把網址分享給朋友一同欣賞吧！


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.27.41.47
※ 文章網址: https://www.ptt.cc/bbs/Touhou/M.1536420407.A.723.html
※ 編輯: Jasonnor (114.27.41.47), 09/08/2018 23:35:08
※ 編輯: Jasonnor (114.27.41.47), 09/08/2018 23:41:29
※ 編輯: Jasonnor (114.27.41.47), 09/08/2018 23:46:33
推 freedom5487: 推，真的太神啦
推 Tsozuo: 好酷的東西 推推
推 latious: wow推推 感謝分享
推 LillyWhite: 左下角選項可以選曲 圖是Jasonnor桑的收藏嗎?
推 LillyWhite: 讚讚! 搭配起來很有氣氛!
謝謝，圖是從pixiv根據收藏數爬來的，也有私心放了一些收藏 ^_^

推 youtien: 厲害！請問可以轉載嗎？
歡迎唷！

推 WoodPunch: 推推
推 wlsh5701: 推
※ 編輯: Jasonnor (114.27.41.47), 09/09/2018 15:15:30
推 samex4x4: 推推!! 太厲害了
※ 編輯: Jasonnor (114.27.41.47), 09/09/2018 17:04:24
→ LillyWhite: (原來原文中就有解釋了 是我漏看 感到抱歉 Orz)
推 LillyWhite: 因為接連點了幾首歌 發現圖都很精美! ( >////<)b
感謝你看完落落長的動機 XD

推 freedom5487: 轉到C_chat吧
感謝提醒！
※ 編輯: Jasonnor (114.27.41.47), 09/09/2018 21:12:59
※ Jasonnor:轉錄至看板 C_Chat                                      09/09 21:13
※ 編輯: Jasonnor (114.27.41.47), 09/10/2018 00:27:35
※ 編輯: Jasonnor (218.164.6.79), 09/11/2018 17:10:27
推 NightDream08: 推
推 wayneshih: 這..好東西啊
推 j456789a: 神神神神神
推 sarsman: 推