http://www.wizardcraft.works/apps/autoxfadewww.wizardcraft.works
はじめに
転職に伴い、残っていた約2週間分の有休休暇を消化していました。 きっと明日から通勤に嘆くことになると思います。
さて、明日から新しい会社で働くのですが、しばらくはまとまった休みが取れそうになく、また、技術的スキルアップの必要性を感じていたので、良い機会だと思って音楽系Webサービスを作ってみることにしました。
1月中旬くらいから取り組んでいたので、だいたい2週弱くらいの期間でした。
この取り組み（一人技術研修）を通して、Webサービス開発における試行錯誤や悩み、所感などが多々ありました。今後の自分のメモとして、また、誰かの役に立てればいいなと思い、拙文ですが書き記したいと思います。
目的と設計思想
何かを作る時の前提条件となる自身の思いとして、誰かの役に立つような音楽系のWebサービス開発したいと思っていました。ただ、サービスの使命が「誰かの役に立つ」という曖昧な状態では良い開発ができないため、ユースケースを明確にする必要がありました。
今回は、その「誰か」として、自分を含む、DTM（音源制作）に取り組まれている方を想定し、何か便利なものが作れないか考えてみました。その時、ちょうど音源制作でクロスフェード音源を作っており、DAWを使って結構な時間をかけて作業していました。そこで、良い感じのクロスフェード音源をぱぱっと作れたら便利だと思い、この題材に決定しました。
クロスフェード音源を簡単に作るWebサービスとして開発を進めていたのですが、実は一度、大きく設計思想を変更しました。
クロスフェード音源を作成するにあたり、重要な制御パラメータとしては、各楽曲の聞く区間と曲順が上げられます。当初は、ユーザが楽曲をアップロードしたら、それらを全て自動で設定してクロスフェード音源を作れたら嬉しいのではないか」という仮説を持っていました。しかし、最初のプロトタイプ版を作り終えて自身で試しているうちに、完全自動よりも、最終的には自分で操作・パラメタを決定したいというニーズがあることに気が付きました。また、楽曲の良い部分やイイ感じ曲順を自動決定するのは、アルゴリズム的にもなかなか難しく、ユーザごとに最適解が異なります。つまり、サービスを完全自動化してしまうと、ユーザは自身が満足するコンテンツを作りづらくなってしまうのではないかと思いました。そこで、現在の実装のように、ユーザが自身で曲順や区間を編集できる枠組みであり、それら制御パラメタをアルゴリズムで支援することで、素早く簡単にクロスフェード音源を作成できるサービスであることを設計思想としました。
技術的なところ
インフラ構築
ConohaのVPS（Ubuntu 16.04）上でDockerによる運用をしています。 https://wizardcraft.hatenablog.com/entry/2019/01/31/122203wizardcraft.hatenablog.com
サーバ側（Flask）
https://wizardcraft.hatenablog.com/entry/2019/01/27/144337?_ga=2.232337119.1165421097.1548836691-2013923080.1537367281wizardcraft.hatenablog.com
https://wizardcraft.hatenablog.com/entry/2019/01/25/102630?_ga=2.232337119.1165421097.1548836691-2013923080.1537367281wizardcraft.hatenablog.com
FlaskのBlueprintで組んでいます。
ルーティングやディレクトリ構成に慣れるまで少し時間がかかりました。
クライアント側（Webデザイン）
Bootstrap4 css
リスト（li要素）のインタラクティブな並べ替え
信号処理（Python）
https://wizardcraft.hatenablog.com/entry/2018/10/19/145254?_ga=2.126045005.1165421097.1548836691-2013923080.1537367281wizardcraft.hatenablog.com
未実装、まだ悩んでいるところ
クライアント側でのローカルオーディオファイルの再生
現在の実装では、全てローカルのオーディオファイルを再生するような実装となっていますが、オーディオフォーマットやブラウザによって再生できない場合があります。
HTML の音声と動画のメディア形式 - HTML: HyperText Markup Language | MDN
ローカルで再生できないフォーマットの場合は、サーバでmp3に変換して配信する方法を検討しています。
また、現在選択しているクロスフェード区間のみを再生したり、
有効なクロスフェード区間やオフセットのみを選択させるためには、各オーディオファイルの時間長を参照する必要があるのですが、audio.durationの取得が割と失敗することがあります（loadedmetadataを使っていても）。従って、setTimeoutオーディオファイルロード後に正しい時間長が取得できるまでなどで何回か尋ねたり、サーバー側から配信してやる方法を検討しています。
最後に
自分が納得するできるまで、もう少し機能をブラッシュアップしてみたいと思います。 また、今回は音源制作者向けのサービスでしたが、リスナー側がより楽しく音楽鑑賞できるような音楽鑑賞解析Webサービスを作ってみたいと思っています。
