どうも！「おと風景」の開発をしているTomicciです。
本日、楽曲詳細画面を追加、公開したので記事を書きます。
■楽曲詳細画面の例
【おと風景】氷と炭酸の音
技術的な部分も簡単に説明するので、興味ない方は読み飛ばしてくださいね！
これまで楽曲詳細画面がありませんでした
プレイリストで楽曲を再生できるように作っていたんですが、楽曲を個別にSNSシェアできない点が不満とTwitterなどで見たんですよね。
今までは「水の音」などのジャンル画面をSNSシェアするしかなかったのです。
おと風景のプレイリストはjPlayerをカスタマイズして作ってるんですが、これにSNSシェアを組み込む方法が僕の技術力だとなかなか分からないんですよね。。開発もかなり大変そうだし。
なので、楽曲詳細画面を作って、SNSシェアしてくれる方は、そちらからシェアしてもらえればいいなと思いました。
プレーヤーの楽曲からシェアされるよりも、一度詳細画面に来てもらえればPVも上がりますしね。
ジャンルページにぶら下がる形で、楽曲詳細画面ができるので、SEO上も有効そうですよね。
さらに、今後、音の販売などもおこないたいなと考えた際に、楽曲の詳細情報が分からないとダメなので、やはり必要な画面でした。
まだ表示していない項目もありますが、早速サウンドクリエイター名とかは表示できるようにしたんで、徐々に他のクリエイターにも参加してもらえるように準備を進めています。
楽曲詳細画面を作らないといけないとは思いながらも、日常の業務に追われ、サービスをリリースして既に2カ月近くが経過。
シルバーウィーク中に2日半仕事できる時間を得たので、この間にやっつけました！久しぶりに夜中まで仕事してました。
実家で子どもの面倒を見てくれる妻に感謝。明日と土曜日は妻が仕事なので、僕が1日子どもの面倒を見ます。
音声ファイルの波形表示
…本題に戻ります。
せっかく楽曲詳細画面を作るのであれば、音声ファイルの波形を表示したいなと思い、実装しました。
ただ、表示するだけではなく、波形をクリックして再生場所を移動するとか、表示調整なども含め大変でした…。
おと風景は、データ転送量の問題で、音声ファイルを自サーバーには置いておらず、SoundCloud(プロ契約済み！)に置いています。
それを、API経由で自サイトで使用しているんですが、公開されている音声解析系のプラグインを漁って、サイトに組み込んでテストしても、波形が解析されないんですよね。
なんかやり方があるのかもしれないんですが、全然ダメで、かなりの労力を消費してしまいました。
最終的には、SoundCloudの波形を使って実装するというやり方になりました。
散々海外の質問サイトなどを調べ、下記プラグインを見つけ、カスタマイズして使いました。ありがたい「MIT license」。
[GitHub] soundcloud-custom-player
波形を表示しつつ、リスト形式のプレーヤーも作れるようなので、いつか使ってみたいですね。
需要があれば、実装方法とか後日詳しく書こうと思います。ないか…w
楽曲販売
近日中に楽曲販売を開始します。環境音なんて売れるのー？と思われるかもしれません。
僕もそう思います。自信はないです。
ただ、テレビや映画、ラジオ、YouTubeやニコ動などの作品、ゲームなど、環境音が必要なものは世の中にたくさんあります。
必要としている方に、できるだけいい音で届けられるように、音のクオリティも上げられるように頑張るのみですね。
