Web上での音声の同時再生・連続再生や編集をスムーズに実装できるTone.jsの使い方

Web上での音声の同時再生・連続再生や編集をスムーズに実装できるTone.jsの使い方

Tone.jsは、Web上で音声ファイルを扱う「Web audio Api」をとことん簡単に扱うためのjavascriptライブラリです。

https://tonejs.github.io/

 

javascriptを利用した音声の再生、編集等は、基本的にHTMLのaudio要素を使用するか、Web audio Apiを使用することで可能です。

ただ音声ファイルを再生させるだけ(ボタンに効果音をつける等)であれば、audio要素の利用が手軽で良いのですが、以下のような問題点も含まれています。

・複数の音声の同時再生ができない

・連続した音声の再生時にズレが生じやすい

上記の問題を解決したい場合に、Web audio Apiの使用が必要になりますが、使用方法が難しくて分かりにくい…。

そこでTone.jsの出番です。

私の作成したWebサービス Random Chordboxでも音声再生の部分は、Tone.jsに任せています。

※正直Web audio Api自体の使い方については全く分からず、Random Chordboxもコードをランダムに生成するだけで終わる予定でしたが、Tone.jsを知り、サイト上でスムーズに演奏する仕組みを実装できました。

※基本的な使用方法は以下のページを参考にしました。ありがとうございます。
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた!http://webhacck.net/archives/1985658.html

Advertisement

Tone.jsの導入

早速使用方法を説明します。

まず、以下のURLから最新バージョンのTone.jsをダウンロードして、HTMLでjsファイルを読み込んでください。

https://github.com/Tonejs/Tone.js/releases

音声の再生

Tone.js自体に音源が準備されているので、スクリプトを読み込んだ後は、自分で音源を準備しなくても、以下のような簡単な記述で音声を再生することが出来ます。

See the Pen xBzqJw by yoneshi (@yoneshi) on CodePen.

Tone.jsでは、準備されている音源は色々あるのですが、とりあえず代表的なSynth()、PolySynth()で再生する方法です。

まず、以下の記述でそれぞれの音源に接続します。

その後、Synth音源に接続した「synth」を「triggerAttackRelease」することで、音声を再生できます。

「”C5″」は再生される音程を(C=ド、5=オクターブの高さ)、「’2n’」では再生される長さを設定できます。

※「n」は、○分音符とかの○の部分を表しており、2nの場合は2分音符、4nの場合は4分音符、1mの場合は全音符で再生されます。

 

和音での再生を行う場合には、以下のように音程を配列で囲むことで実行できます。

また、Tone.jsの代表的音源であるSynth()では和音は再生できず、PolySynth()を使用することにより和音の再生ができます。

ちなみに、PolySynth()で単音の再生もできるので…Synth()の使い道は…。

 

Tone.jsでは他にも色々な音源があるので、気になる方は以下も覗いてみてください。

https://tonejs.github.io/docs/r13/Synth

音階の再生

次は、音階の再生について見ていきましょう。

音階はTone.Sequenceを使って、再生されることが出来ます。

※Tone.Sequenceの公式解説はこちらから

音階は、以下のように、Tone.Sequence()に二つの値をセット後、.start()を実行することで再生されます。

soundsetは、以下のように、「再生される音源」と、「再生される一音の長さ」をセットした関数です。

kaeruは、再生されるメロディです。

Tone.Sequenceでは、配列で作成したメロディを再生することが出来ます。

要素ごとに1拍でカウントされているので、配列の中に更に配列を入れると、1拍内でそのメロディーを全て再生します。

※つまり、逆に言えばTone.Sequenceで和音の再生はできません

また、nullを指定した場合、そこは休符になります。

今回はカエルの歌を作りました。

See the Pen jJeQzO by yoneshi (@yoneshi) on CodePen.

さて、「カエルの歌」ボタンを押しただけでは、音声は再生されないですね?

これは、「カエルの歌」ボタンを押した時点で「Tone.Transport」にメロディを同期させただけで終わっているためです。

メロディを同期させた「Tone.Transport」を以下の記述で実行することで、初めて音声が再生されます。

そこで、「カエルの歌」をクリック後、「Transport_start」ボタンをクリックすることで、実際にカエルの歌が演奏されることを確認できます。

実際にライブラリの中でどのような動作が行われているかは分からないのですが、Tone.jsは、「Tone.Transport」にメロディを乗せた後、「Tone.Transport」を出発させることにより演奏を開始する。そんな列車のようなものと捉えました。

※乗せたメロディ=列車、タイムライン=線路のようなもの…かな?

Tone.Transportについて

Tone.Transportの公式解説はこちらから

メロディ=列車、タイムライン=線路のもっと分かりやすい事例を見てみましょう。

 

See the Pen jJeQzO by yoneshi (@yoneshi) on CodePen.

進行中のTransportは、以下の記述でストップすることが出来ます。

ではまず、「カエルの歌」→「Transport_start」→「Transport_stop」→「Transport_start」の順でクリックしてみてください。

カエルの歌は再生されますよね?

それでは、「カエルの歌」→「Transport_start」→「Transport_stop(イベントも削除)」→「Transport_start」ではどうでしょうか?

カエルの歌は再生されませんね。

 

これは何故かというと、「Transport_stop(イベントも削除)」内の「Tone.Transport.cancel();」によりTransport上のイベントを削除したからです。

そのため、「Transport_stop(イベントも削除)」→「Transport_start」とクリックしても、何も乗っていない列車(メロディ)が走り続けているだけなので、音声が再生されません。

 

それでは、次は、「カエルの歌」→「Transport_start」をクリック後、「カエルの歌」ボタンを複数回押してみてください。

カエルの歌の音声が重なりまくってますね。

 

これも要は、一つの線路上にたくさんのカエルの歌がどんどん乗せられて、カエルの歌が重複して再生されている状態です。

こういった状況を防ぐために、「Tone.Transport.cancel();」でイベントの削除が必要になってきます。

音声の再生状態の取得

音声の状態は、以下の記述で取得することが出来ます。

「Tone.Transportの再生状態を取得」ボタンではTransportの再生状態を取得することが出来ます。

再生中=started

停止中=stopped

これは、Transportの再生状態を取得するため、実際に音声が再生されていない場合でも、Transportが進行中であれば、startedが返されます。

これをif文と組み合わせるなど応用すれば、音声が再生中は●●の処理を変更するといったことも可能です。

Advertisement

紹介が長くなってきたので、今回は一旦ここで終了します。

次は、こちらのページで和音を伴った複雑な音階の再生について紹介していきます。