nanaってアプリご存知ですか?
スマホで手軽に歌って投稿できる、音楽投稿アプリです。
カラオケ音源と自分の歌を合わせて投稿するわけなのですが、投稿された音源をアカペラ(カラオケ音源無し)で聴けるようにしたので共有致します。
オチに使われててワロタ https://t.co/904qyIYAAM
— ktn. (@xpsmjx) 2019年6月2日
渡辺さんの記事見た先輩達からフォローされる 良い傾向なのでもっと私を登場させてくれないかな(適当)
— ktn. (@xpsmjx) 2019年6月2日
よーし、やってやろうじゃん!
スマホでつながる音楽コラボアプリ nana のダウンロードはこちら
iOS版:https://go.onelink.me/app/86c18ddd
Android版:https://go.onelink.me/app/ff84b099
アカペラ聴けるツール
音源情報
曲名:–
歌手名:–
投稿者名:–
元音源
–
DLリンク:–
アカペラ音源
–
DLリンク:–
使い方
- アカペラ聴きたい音源のURL調べる。
- 入力欄にURLを入力する。
- 取得ボタンを押す。
- 下に元音源とアカペラ音源を聴けるプレイヤーが出てくる。
簡単ですね!
おまけとして、音源ダウンロード用のリンクも付けました。
クリアボタンを押すと消えます。
エラー処理をほとんど入れていないので、想定されていない使い方をするとぶっ壊れるかも知れません。
丁寧に使って下さい。
免責
2019年6月5日時点で動作することは確認済みです。
ただしnana側の仕様変更により動作しなくなる可能性は多分にあります。
動かなくなった時に対応するかどうかは未定なので、動作する間だけお楽しみ下さい。
ktn.さんの音源で遊ぼう
ここまでの内容だと新潟大学関係なくてサイトの趣旨に合っていないので、新大生であるktn.さんの投稿した音源で遊んでみましょう。
これならこのサイト向きの内容になりますね。
MIXし直してみる
オケとボーカルが分かれた音源が手に入るので、ボーカル音源をちゃんとオケと合わせてみました。
3曲を1分ぐらいにしたktn.メドレーです。
マイクがスマホなのと元のエフェクト(?)か部屋鳴りかでアレでした。
宣伝
ボーカルMIX、パラMIXとか渡辺に頼んでみませんか?
安くやります。
ボーカルRECならマイクお貸しできます。
最近の成果物の確認はこちら↓
技術解説
解説して需要ありますかね。
分からない人は知らんがなという感じでしょうし、分かる人は解説するまでもなく分かる気がします。
概要
jQueryとPHPを使って実装しています。
なぜjQueryだけじゃないかというと別ドメインのサイトのデータの取得が面倒だからで、なぜPHPだけじゃないかというとnana側でJava Scriptの変数として格納されてるデータを使いたかったからです。
流れとしては、
- ボタンが押されたらjQuery実行
- 指定されたURLのソースをPHPで取得してくる
- 取得したソースをjQuery側でページ内に埋め込む
- ページ内に<audio>タグ埋め込む
という感じです。
PHPでやってること
セキュリティ的に、ソースコード自体は伏せておきます。
nanaのURLを受け取って、そのURL先の<script>タグの中身を返すだけのものです。
やってることは
- 受け取ったURLがnanaのものか確かめる
- URL先のソースコード全部取ってくる
- そのうち<script>タグから</script>タグの内容だけ切り取る
- そのうち要らないやつ(src付いてるやつ)を消す
- 完成したやつを返す
という感じで、9行しかない簡単なものです。
jQueryのソースコード
全文だと長いので必要そうなとこだけ…。
全文見たかったらソースから見て下さい。
$(function() { $('.nana_btn').click( function() { $.ajax({ url: 'https://shindai.watatanabe.com/php/get_nana_source.php', type: 'post', data:{ url: $('#nana_url').val() } }).done(function(data) { $('.nana_hidden').html(data); let nana_sound_url = window.__NUXT__.state.posts.mainPost.sound_url; let nana_single_track_url = window.__NUXT__.state.posts.mainPost.single_track_url; let nana_sound = $('<audio></audio>',{src:nana_sound_url,controls:'true'}); $('.nana_sound').html(nana_sound); let nana_single_track = $('<audio></audio>',{src:nana_single_track_url,controls:'true'}); $('.nana_single_track').html(nana_single_track); }); } ); });
jQueryは閉じタグ意味分かんなくなりますね。
取得ボタンにはnana_btnというクラス名を付けてるので、それがクリックされたら処理開始です。
まずは入力されたURLをajaxで上述のPHPにPOSTします。
PHPからデータが返ってきたらnana_hiddenというクラス名が付いてるとこにそのまま埋め込みます。
返ってくるのは<script>~</script>を想定しているので何もしなくても画面上には表示されませんが、一応nana_hiddenはdisplay:none;で非表示にしています。
他サイトのscriptを埋め込むの、悪意ある内容埋め込まれたら普通に危ないなとは思うのですが、nana側の変数を直接参照したいので、まあいっかという判断です。
nana側を見てもらえれば分かる通り、window.__NUXT__.stateという変数内に色々なデータが保存されています。
連想配列になってるので後ろに文字を繋げていけば目的のものに辿り着けます。
例えばアカペラ音源のURLはwindow.__NUXT__.state.posts.mainPost.single_track_urlに入ってますね。
<script>の内容をこのサイト自体に埋め込んでるので、そのまま変数を参照できます。
あとは$(‘<audio></audio>’,{src:nana_single_track_url,controls:’true’});で<audio>タグ作って、それをnana_single_trackクラスのとこに埋め込んでおしまいです。
曲名とかも同じように取得→埋め込みしてます。
変数名は、Wordpressで何使ってるのか知らないので、干渉することがないよう頭にnana_と付けてます。
あとはnana側の命名に沿ってます。
こういうの作る時には
こういう、他の人が作ったサイトを利用した何かを作る時にはブラウザの開発者ツールが便利です。
渡辺はChrome使ってます。
今回のnanaで言えば、<script>タグ内は圧縮されていてそのままじゃとても読めたものじゃないです。
そんな時に開発者ツールのコンソールからこの変数なに入ってるかな?と見てくと楽です。
コードがちゃんと動くかもコンソールで試しながらだとどこで止まってるかとか分かって良いです。
おわりに
jQuery久々に触ったのと、Wordpressで実行させるの初めてだったのでめちゃくちゃ時間かかりました。
ゆうに10時間超えてます。
テスト勉強しろ渡辺。
コメント
とても素晴らしいサイトで何度か利用させていただいております。
最近nanaのアカペラ機能を抜くことができなくエラーになってしまうのですが、ほかに方法はないでしょうか?
どうしても歌のみを抜き出したいものがあり、お力をお借り出来たら幸いです。
宜しくお願いいたします。
12月4日頃から同様のお問い合わせを頂いており、その頃に仕様変更があったのだろうと思います。
現在はアカペラ音源が一般ユーザーが取得できる場所に見つからず(逆に今まで取得できていたのが謎なのですが)、同様の手法は使えなくなりました。
「免責」の項に書いていた通り「動作する間だけお楽しみ下さい」ということで、対応予定はありません。
アカペラ音源が欲しいのがご自身やご友人の音源であるなら、最初からアカペラの状態になるよう録音するのが良いと思います。
他人の音源の場合、歌声りっぷなどのソフトウェアを使えば擬似的なアカペラ音源を取得できるのかなと思います。
https://www.vector.co.jp/soft/win95/art/se127635.html
ご丁寧にどうもありがとうございます。
早速試してみます。
ご回答に感謝いたします。
今後とも宜しくお願いいたします。