PCでもっと気軽にサンプリングで遊べるWebアプリ『YouChop』を作った話
※モバイルからはアクセスができません；；
今回、RUNTEQ祭に向けて初めてWebアプリを開発することになったので、課題的観点と技術的観点の２つからこのWebアプリを紹介しようと思います！
ただ、まず前提として「サンプリングとはなんぞや」という人のために簡潔にサンプリングというものを説明した後で、それら２つの項目へ進んでいきます。
サンプリングとは
昨今、全世界ではhiphopが音楽シーンのメジャーを張っています。
hiphopの楽曲は大きく分けて２つで構成されています。
「ラップ」と「ビート」です。
このうち、「ビート」というのが、ラップをしている裏で聞こえるドラムとかメロディーのことですね。
では、このビートというものはどのように作られているのでしょうか。
実は、hiphopのビートの大部分がサンプリングという手法を用いて作られています。
具体的なサンプリングの方法は以下の動画を見ると直感的に理解しやすいです。
動画内では数々の曲の波形が登場し、その波形の一部の注目としてそれをひたすらループさせているのが分かりますね。
つまりサンプリングとは、このようにあらゆる過去の楽曲の一部を切り取って、音程を上げ下げしたり引き伸ばしたり縮めたりなど加工を加えた上でそれらを順不同に並べたりタイミングを変えて打ち込むことで、新しい音楽として再構築する音楽的手法です。
似たような概念でいうと、アートの世界では「コラージュ」というものがありますね。
過去のチラシや雑誌などの一部を切り取って再構築するアートの一種です。
Image by rawpixel.com on Freepik
サンプリングに使う機会はもっぱら「サンプラー」と呼ばれる四角い機械や、DTMと呼ばれる音楽制作ソフトウェアでプラグインとして存在するサンプラーソフトウェアを使うのが一般的です。
以下の動画にあるような機械（サンプラー）にレコードを繋いで音源を読み取り、各パッドに切り取った音を配置していきます。 そしてそれらをタイミングよく押すことで音楽を構築していきます。
hiphopのサンプリング元になる楽曲のジャンルはJazz, Soul, Funk, R&Bなどが中心ですが、自分の声を吹き込んでそれを切り取って加工して使ってもそれもサンプリングです。
また、サンプリングが使われているのは何もhiphopだけではなく、pop, techno, house, jazz, cartoon animeなどあらゆる領域で使用されております。
例えば、パワーパフガールズのオープニングも「Funky Drummer」という過去に1962回もサンプリングに使用されているドラムを早回しにして音程を上げて使用されています。
公式からの公開されている音源(32秒〜)：
公式からの公開されている音源（5分22秒〜）：
また、サンプリングという手法が使用された楽曲で世界的に最も有名な例の１つとしてDaft Punkの「One More Time」があります。
公式からの公開されている音源：
公式からの公開されている音源(22,19,24秒)：
このようにサンプリングという手法は様々なジャンルで使用されており、過去の楽曲の一部を加工する形で新しい音楽を作ろうという目的があります。
権利関係については、Tracklibと呼ばれるサービスを使ってサンプリングする権利を購入するというのが一般的になっており、そういったサービスの普及に伴い権利関係をクリアにしてから使うという意識がより強くなっています。
このWebアプリが解決すること
サンプリングという手法自体の具体例を示したところで、次にこのWebアプリで解決したいことを示します。
①DTMやサンプラーを買えないor買わない問題
まず1つ目の解決したい課題は自身の実体験がベースになっています。
自分は中学生でhiphopに猛烈にハマりビートメイカーになろうと考えており、実際にビートメイカーとしてお金を稼いだのは高校卒業後からでした。PCは家にありましたが、お小遣いが一切ない環境で育ったので、サンプラーを買う余裕がありませんでした。
サンプラーは最低でも7万円ほどからで、一番欲しいと考えていたもので40万円ほどの金額です。
DTMも5万〜12万することが一般的です。
よって高校卒業後に学校側からバイトを許されるまでは一切お金を稼ぐことが出来ず、その5年間ほどサンプリングすることが出来ないという非常にもやもやする時期がありました。
つまり、従来は「サンプラーを買うお金がない＝サンプリングが出来ない」というのが当たり前で、この状況に強い課題を感じていました。
また、「興味は強くあってもお金はない」という自分のような人だけでなく「興味はあるがお金を出すほどではない」という人にとっても7万~40万するサンプラーを購入するというハードルは非常に高いと感じています。
よって、以上の画像の「いつかはするがお金を稼いでから」の層と「無料ならしてみる」の層がすぐにサンプリングに触れる環境を提供することがこの課題を解決する方法だと考えました。
②一連の制作の工程が多い
これは2つ目の課題で、これを実体験がベースになっています。
趣味レベルでのサンプリングビートの制作の場合であっても以下のものが必要になってしまいます。
// サンプラーの場合
・レコード収集
・レコードプレーヤーのセッティング
・サンプラー
・サンプラーとレコードプレーヤーの接続
// DTMの場合
・音源を探す
・ソフトウェアの起動（重い）
・音源ファイルのダウンロード（ファイルがだんだんとかさんでくる）
・ソフトウェア内のプラグインの導入
音源を探したらすぐにサンプリングしたいのに、どちらの場合もやたらとセッティングが挟まってくることが多く、スムーズにいきません。
本職にする場合は我慢はできますが、趣味の場合だと正直フラストレーションが貯まる時が非常に多かったです。
よって、これらを出来る限り「音源を探す => サンプリングする」の2手順だけで完結するようにということもこのWebアプリの目的の１つとなります。
③権利関係がクリアでない場合が多い
Tracklibなどのように権利元にお金が支払われるような仕組みのサービスを利用している場合はいいのですが、実際問題としてYoutubeなどから無断で音源をダウンロードし、それを使用するという行為が存在してしまっています。
それは「Youtubeの規約違反」かつ「著作権関連の違反」にあたります。
これら2つを違反しないようにするには、Youtubeのサービスを利用したままでいることが重要です。
実はYoutubeは実はAIによって動画の中に無断使用の音源が含まれている場合、その音源から権利元を特定して、その動画の収益を権利元に渡すというのをAIが自動的に行っています。
ということは、Youtubeのサービスを利用してその音源を聞いていれば権利元にお金が入ることになり、「Youtubeの規約違反」と「著作権関連の違反」の両方を避けて健全に利用することが出来ます。
以上のことから、このWebアプリでは一貫してYoutube iFrame APIの枠を超えて利用できないことを軸としています。
よってこのWebアプリではYoutubeから音源をダウンロードすることはありませんし、埋め込み動画以外からその音源を聴くことはありません。
※ドラムのワンショットに関してはSample Focusというサイトの音を使用しており、利用規約では「営利・非営利問わず自由にご利用いただけます」との記載があるため、使用しております。
技術スタック
今回のMVPの段階では、Ruby/Ruby on railsとJavascriptのうち、記述した処理の大部分はJavascriptで、特にJavascriptのフレームワークであるStimulusを使用して開発しています。
Youtube動画の埋め込みや操作はYoutube iFrame APIを、シーケンサーなど音声の操作などはTone.jsを使用。
CSSフレームワークはtailwindCSSで、一部Flowbiteライブラリを使用しています。
今後、ログイン機能や、ユーザーがビートをマイリスト的な形式で保存する機能（Youtubeの音源自体をダウンロードすることは複製行為にあたるため、動画のvideoIDだけを保存する）を作っていきたいので、railsでの処理が増えていくと思われます。
YouChopについて
このWebアプリ「YouChop」では「音源を探す => サンプリングする」の2手順に完結し、「興味がとてもあるがお金がない人」や「お金を出すほどではないが興味がある人」が気軽にサンプリングで遊べる環境を構築しました。
なお、モバイルからのアクセスからだとYoutube iFrame APIとTone.jsの処理が厳しく、非常にユーザー体験を損ねてしまうことからモバイルからの動線は断念する形を取りました。 ここは非常に反省点です。
※「Chop」とは、サンプリングの専門用語で音源を切り刻む過程を指します。
サンプリングに熱心な人はほとんど英語圏に集中していることから、ターゲットは米国を中心とした海外の「興味がとてもあるがお金がない人」または「お金を出すほどではないが興味がある人」に設定しています。
今回、サンプリングは知識として知ったとしても感覚として面白みを感じていないと実際にサンプリングをしても辛い思いをする可能性が高いので「サンプリングに興味がない人」は設計の上で考慮しないことにして開発をスタートさせました。 そこを考慮すると前提知識や面白さを補完して強調するためにWebアプリの設計で非常に冗長的な説明の箇所が増えてきてしまい、「サンプリングが何かを既に知っていて興味がある人」の体験を損ねる可能性が高くなるからです。
開いた段階で全てが最初にセットされているので、まずは「Play」を押してシーケンサーをプレイしてみましょう！
使い方はヘッダーの「How to Use」から閲覧できます！
Discussion