サウンドについて
サウンドの形式
novelsphere.js コンテンツを制作する際には、1つのサウンドに対し、以下の形式のファイルを同時に用意しなければなりません。
- Ogg Vorbis 形式(拡張子は .ogg)
- Advanced Audio Coding (AAC) 形式 (拡張子は .mp4)
例えば「hoge.wav」というサウンドファイルを効果音として使いたい場合には、「hoge.ogg」(Ogg Vorbis 形式)と「hoge.mp4」(AAC 形式)という2つのファイルを用意し、両方をプロジェクトフォルダ内に置いておく必要があります。これは、どちらか片方の形式のサウンドしか再生できないブラウザが存在するためです。
また AAC 形式のファイルは、ビットレート 160kbps 以下、サンプリング周波数 48kHz 以下である必要があります。これ以上の音質の AAC 形式のファイルは、iOS では再生できません。
なお、拡張子は必ず上記のものを使用してください。
より正確には、サウンドが AAC 方式で圧縮されていることと、ファイルの形式(コンテナ)が MP4 であることは別のことです。novelsphere.js でサウンドを再生するためには、AAC 方式で圧縮されたサウンドが MP4 形式のコンテナに格納されているファイルが必要となります。また、そのファイルの拡張子は .mp4 でなければなりません。
上記の条件を満たさないファイルを使用した場合、一部のブラウザでサウンドが正常に再生されない可能性があります。
現在の novelsphere.js は、コンテンツにアクセスしたブラウザに応じて、以下のようにサウンドファイルを使い分けています。
ブラウザ | 使用するサウンド形式 |
Google Chrome (Windows/Mac) | Ogg Vorbis 形式 |
Mozilla Firefox (Windows/Mac) | Ogg Vorbis 形式 |
Safari (Mac) | AAC 形式 |
Internet Explorer (Windows) | AAC 形式 |
Safari (iOS) | AAC 形式 |
Google Chrome (Android) | Ogg Vorbis 形式 |
BGM の再生
BGM を再生するには、[playbgm]タグを使います。
[playbgm storage="hoge"]
BGMを再生しています。
上記スクリプトのように、storage 属性に再生したいサウンドのファイル名を指定します。
ファイル名は必ず拡張子を省略した形で指定してください。また、ファイルパスを含めてはいけません。詳しくは「文法について」の「ファイル名の扱いについて」を参照してください。
上記のスクリプトを再生すると、アクセスしているブラウザに応じて「hoge.ogg」または「hoge.mp4」というファイルのいずれかが再生されます。
フェードインとともに BGM の再生を開始することもできます。
[fadeinbgm storage="hoge" time="3000"]
[wb]
BGMのフェードインが完了しました。現在再生中です。
上記のように記述すると、3000 ミリ秒をかけてフェードインしながら、「hoge.ogg」または「hoge.mp4」というファイルが再生されます。
[fadeinbgm]タグは、フェードインの完了を待たずに次の行へとコンテンツを進めてしまいます。[wb]タグを用いれば、フェードインが完了するまで(この場合は 3000 ミリ秒の間)コンテンツの進行を止めておくことができます。
もちろん、フェードインの間コンテンツの進行を止めたくない場合には[wb]タグを使う必要はありません。
ブラウザの仕様上の制限により、iOS の Safari もしくは Android の Google Chrome からコンテンツにアクセスしている際には、フェードインを伴って BGM の再生を開始することはできません。
この場合、フェードインを伴った再生ではなく、通常の再生に置き換えられて処理されます。
また、あまり使う機会はないかもしれませんが、[wl]タグを用いることで、その BGM の再生そのものが終了するまでコンテンツの進行を止めておくこともできます。サウンドロゴなどの短い BGM を再生するときなどに有用です。
BGM の停止
BGM を停止するには、[stopbgm]タグを使います。
[stopbgm]
BGMを停止しました。
フェードアウトとともに BGM の再生を停止することもできます。
[fadeoutbgm time="3000"]
[wb]
BGMのフェードアウトが完了しました。現在BGMは鳴っていません。
[fadeinbgm]タグと同様、[wb]タグを用いない限り、フェードアウトの終了は待ちません。
ブラウザの仕様上の制限により、iOS の Safari もしくは Android の Google Chrome からコンテンツにアクセスしている際には、フェードアウトを伴って BGM の再生を停止することはできません。
この場合、フェードアウトを伴った停止ではなく、通常の停止に置き換えられて処理されます。
BGM の音量調整
BGM の音量を変更するには[bgmopt]タグを使います。
[playbgm storage="hoge"]
BGMは音量100%で再生中です。
[bgmopt volume="50"]
BGMの音量が50%になりました。
なお、BGM の再生を始める前に[bgmopt]タグを置くことによって、最初から任意の音量で BGM を再生することもできます。
また、以下のように、フェードを伴って BGM の音量を調整することもできます。
[playbgm storage="hoge"]
BGMは音量100%で再生中です。
[fadebgm volume="50" time="2000"]
[wb]
BGMの音量が50%になりました。
[fadeinbgm]タグや[fadeoutbgm]タグと同様、[wb]タグを用いない限り、フェードの終了は待ちません。
ブラウザの仕様上の制限により、iOS の Safari もしくは Android の Google Chrome からコンテンツにアクセスしている際には、BGM の音量を調整することはできません。
効果音の再生・停止・音量調整
効果音の再生の方法は、BGM の再生とほぼ同じです。
効果音の再生には[playse]タグ、停止には[stopse]タグ、フェードイン再生には[fadeinse]タグ、フェードアウト停止には[fadeoutse]タグ、音量の調整には[seopt]タグ、音量のフェードには[fadese]タグ、フェード系の処理の完了を待つには[wf]タグを、再生自体の終了を待つには[ws]タグをそれぞれ使用します。
ただし、効果音特有の概念としてバッファがあります。複数の効果音を同時に再生するため、novelsphere.js は複数の効果音バッファを持っており、上記のタグを使う際には buf 属性を用いて、どのバッファに対してその処理を行うのかを指定する必要があります。
スマートフォンでサウンドを再生する際の制限
複数サウンドの同時再生ができない
ブラウザの仕様上の制限により、iOS 6 未満の Safari もしくは Android の Google Chrome からコンテンツにアクセスしている場合には、BGM を再生しながら効果音を再生するといった複数サウンドの同時再生が行えません。ただし以下の場合では問題なく複数サウンドの同時再生が行えます。
- Android : WebAudioAPI に対応している場合(最新の Chrome であれば対応しています)
- iOS : iOS 6 以上の Safari である場合
同時再生が不可能なブラウザからアクセスされている場合には、自動的に単一のサウンドしか再生しないモードとなりますが、その際にどのサウンドを再生するかについては、Config.json の priorityAudioChannel キーで指定することができます。詳しくは「Config.json リファレンス」を参照してください。
音量調整ができない
上述の通り、ブラウザの仕様上の制限により、iOS の Safari もしくは Android の Google Chrome からコンテンツにアクセスしている場合には、音量調整に関わる処理が行えません。
音量調整には、[bgmopt]タグや[seopt]タグによる音量の指定のほか、[fadeinbgm]タグなどによる BGM や効果音のフェードイン・フェードアウト・フェードを伴った音量変更が含まれます。
このようなブラウザからアクセスされている場合には、指定に関わらず音量は常に一定となり、また、フェードイン・フェードアウトを行おうとしても通常の再生・停止として処理されます。
サウンド再生前のユーザアクションが必要
ほぼ全てのスマートフォン環境では1回以上タップをさせた後でなければサウンドの再生ができないという制限があります。1回もタップしていない段階でサウンドの再生に関わるタグが実行されても、それらのタグは無視されてしまいます。
そのため、コンテンツの開始直後は無音とし、できるだけ早い段階で[waitclick]タグ、[p]タグ、[l]タグなどでクリック待ちを行い、サウンドの再生に関わるタグはそれらのタグより後にのみ置くことを推奨します。