おはようございます、來島です。

 

フリーの波形編集ソフト、「Audacity」をつかって、ボタンに使える効果音を3分で作ってみます。

 

【用意するもの】

・フリーの波形編集ソフト「Audacity

以上です!

 

それではまいりましょう。ホントに3分で作りました。しかも二種類(笑)

1.Audacityを起動します。

00.jpg

 

2.「ClickTrack」を作成します

ツールバーの「製作」メニューから、「ClickTrack」を選択します。これはいわゆるメトロノーム機能ですね。

01.jpg

すると、曲のテンポや拍子を設定するウィンドウが現れます。今回は効果音作成のためだけにこの機能を使うので、適当な設定でOKです。とりあえずデフォルトの設定で作成します。

02.jpg

OKボタンを押すと、画面上にオーディオトラックが作成されます。

 

03.jpg

定規のような部分が、音の波形です。3つおきに大きく振れているのが、小節のアタマです。

実際にどんな音か聞いてみます。

Metronome.swf

 

小節のアタマの音とそれ以外の拍の音、二種類が聞こえたと思います。この二種類の音を使って、「マウスオーバー音」「クリック音」を作ります。

 

3.波形から必要な部分だけを切り出す

二種類の音を、別々のオーディオトラックに切り出します。下の画像は、小節のアタマから二拍目の音までを切り出した状態です。

04.jpg

今回は単純な波形なので拡大表示しなくても波形がある(音の鳴っている)場所がわかるので、ざっくりと切り出してもOK。

05.jpg

切り出したら、今度は別々のオーディオトラックに分けて、それぞれ0:00:00秒から鳴るように配置します。

新規オーディオトラックを作成して、必要な部分をコピペするだけでOKです。上がクリック音、下がマウスオーバー音です。

 

拡大すると、下のような波形になっているのが見えます。

06.jpg

 

4.フェードアウト・フェードイン処理をします

このままの状態だとブツッとした音色なので、まずはフェードアウト処理を施します。それぞれのオーディオトラックの波形を全範囲選択して、「効果」メニューから「フェードアウト」を実行します。

フェードアウトの減衰具合は調整できませんが、今回はそこまでの微調整は必要ないと思われます。

07.jpg

すると、自動的に下のような波形に変わりました。聞いてみると、音の途切れ方の印象が丸くなりました。

 

08.jpg

ここでちょっと豆知識。上下の音の波形を見比べてみると、上のほうが上下に振れている回数が多いのがわかると思います。音の高さはこの振動の回数によって決まります。いわゆる「ヘルツ」と呼ばれているヤツですね。

実際に上下のトラックの音を別々に聞いてみると、小節のアタマの少し高い音が上の波形、それ以外のちょっと低い音が下の波形であることがわかると思います。

 

1ヘルツは「1秒間に1回の周波数・振動数」なので、1000ヘルツは1秒間に1000回振動しているということです。同じ秒数内に振動の回数が多ければ多いほど、高い音ということになります。

 

ちなみに赤ちゃんの泣き声の周波数は、3000ヘルツ(3kHz)前後なのですが、人間が一番よく聞き取れる周波数帯域というのがだいたいそのあたりだそうです。うるさい電車の中でも、ひときわよく聞こえるのはそのためなんですね。

調べてはいませんが、聞こえやすいように、サイレンなんかもたぶんそのあたりの周波数じゃないかと。。

 

よくヘッドフォンのスペックに「周波数特性:5Hz〜30kHz」とか書かれていますが、この範囲が広ければ広いほど、理論上、より広い範囲の音を再生できることになります(だからといってそれだけが良い音の判断基準ではありません!)

…おっと、このあたりの話までしていくと3分どころじゃ終わらなくなるので、割愛します。  

 

09.jpg

フェードアウト処理をしたあとは、アタック音(音の立ち上がり)が少々きつすぎるので、フェードアウト処理と同じように今度はフェードイン処理を施します。音の立ち上がり部分だけで十分なので、処理範囲は上の画像くらいで。

二つのオーディオトラック、両方ともフェードイン処理をします。

 

5.仕上げに、音が鳴り始める前に無音を入れておきます

10.jpg

ツールバー、「製作」メニューから「Silence」を選択して、無音部分を音が鳴り始める前に挿入します。

なぜ無音部分をアタマに入れるかというと、音声ファイルを再生し始めてからいきなり波形が含まれていると、途中から再生されてしまったり、「ブチッ」という音が入ってしまうから。

 

これはFlash上でSoundクラスをnewしてplayメソッドを実行したときに顕著に起こりやすい現象なので、アタマに無音部分を作成しておきましょう。

逆に、あまり長く入れすぎると、再生スタートしたタイミングから音がずれたように聞こえてしまうので注意が必要です。今回は0.005秒に設定しました。

11.jpg

すべての処理がおわった結果、波形はこんな具合になりました。

 

6.WAV形式の音声ファイルに書き出します。

「ファイル」メニューから「別名で書き出し WAV」を選択します。Flashで使う音素材のフォーマットは何がいいか?という問題ですが(次回はこのへんをまとめて記事にしようかと思ってます)、ライブラリにインポートするときはWAV形式で間違いないと思います。

MP3ファイル素材をライブラリにインポートして使おうとすると、特にループさせる音源の場合、ループのたびに一瞬タイムラグが発生してしまうので注意が必要です。

今回はWAV形式の音源をFlashのライブラリにインポートして、プロパティでMP3書き出しを選択しました。ビットレートは48kbps。なぜ48kbpsかというと、それ以下だといきなり音質が変わってしまうように聞こえてしまうのと、48〜128kbpsの間はそんなに変わりがないように聞こえるからです(ボタンなど短い音の場合)

 

それでは実際に聞いてみます。

SampleButton.swf

ここまでの記事を読んでから実際のボタンに設定した音を聞くと、案外「これ、どうなのかな〜?」とか「微妙ですね…」なんて印象を持つかと思います。

でも、実際のサイト上で聴いたときに、ボタン一つの音にそこまで意識することはあまりないので、そんなに違和感を感じないんじゃないかと(笑)

 

今回はメトロノームからそのまま作ってしまいましたが、「製作」メニューから「トーン」を選択して、好きな周波数の音を生成して音を重ねたり、フェードアウト処理とかをしていけば、音程の異なるボタン音がつくれますよ。

 

ちなみに同じく「製作」メニュー内の「ホワイトノイズ」は、アレです。いわゆるテレビの「ザー」って音。(地デジ化であの音も聞けなくなるのかなぁ…?)

 

まとめ:音は「作る」より「選ぶ」のが難しい!

Webに使う効果音・BGMの作成で一番大変なのは、作ることよりも「音を選ぶこと」だと思います。

いい音とか悪い音とかはあまり関係がなく、ビジュアルに合っている音かどうか?という判断基準。しかも、その基準は人それぞれなもんだから厄介です。

目に見えるデザインにも同じことが言えますが、音の世界では人によっての好みが見た目以上に顕著に出てきます。

 

効果音を決めるときは、Flashが組み上がる前にセレクトするのではなく、実際の動きに合わせて効果音を選んでいった方が、二度手間にならずに済むと思います。これは経験上の話ですが(笑)

 それでは今回はこのへんで!

HTML5飯