映画などの映像作品やゲームでは、左で発生した音は左側のスピーカーから、右側の音は右側のスピーカーから強く出力した方が臨場感が増すため日常的に利用されています。HTML5ではWebAudioAPIを簡単に扱えるHowler.jsで手軽に実現することができます。
続きを読む
音声再生
[HTML5] 複数の音声ファイルを1つにまとめる AudioSprite – howler.js編
複数の画像を1枚にまとめるCSSスプライトはかなり前から利用されていますが、今回はその音声ファイル版である「AudioSprite」を作成してみます。
音声ファイルの作成にはNode.jsのモジュール「audiosprite」を、再生には「Howler.js」を利用します。
続きを読む
[HTML5] 音声再生中に再生時間を表示する – howler.js編
WebAudioAPIを簡単に扱えるHowler.jsにはtimeupdate
イベントがありません。もし再生時間に合わせて何らかの処理を行う場合には自分でがんばる必要があります。今回はsetInterval()
を使ってかんたんな実装を行ってみます。
続きを読む
[HTML5] 音声ファイルをJSで再生/停止する – howler.js編
以前取り上げた通り、音声ファイルを再生したり止めるだけであれば<audio>
タグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますw WebAudioAPIを使えばあらゆることが自由自在に出来ますがこいつは学習コストが半端なく使い始めるにはそれ相応の覚悟がいります。
というわけで、若干凝ったことをしたいがWebAudioAPIは避けて通りたい場合には迷うことなく便利ライブラリを使うのがオススメ。今回はこの手の用途ではお約束な「howler.js」を利用します。
続きを読む
[HTML5] 音声をフェードイン・フェードアウトする – audioタグ編
今回は音声ファイルを音量が徐々に上がっていく「フェードイン」する形で再生を開始、逆に音量が徐々に下がっていく「フェードアウト」し再生を終了することに挑戦してみます。
通常は以下のようにplay()
で開始するわけですが、これだと音量MAXで始まってしまうため唐突感が生まれてしまう場合があります。停止する際にpause()
を実行する場合も同様です。それぞれ「カットイン」「カットアウト」と呼ばれますが、意図したものであればもちろんこれで問題はありません。
<audio id="bgm" src="xxx.mp3" preload></audio>
<script>
document.querySelector("#bgm").play(): // 唐突に再生される(カットイン)
document.querySelector("#bgm").pause(): // 唐突に止まる(カットアウト)
</script>
SE(効果音)やジングルなんかはカットインがほとんどですが、しんみりした雰囲気をBGMで出したい場合はフェードイン/フェードアウトを多用することになりますね。
この方法はiPhoneやiPadなどiOSのWebブラウザでは利用できません。もし対応する場合にはWebAudioAPIを採用する必要があります。
[HTML5] 音声ファイルの事前ダウンロード – audioタグ編
前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。例えばボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダウンロードが完了しないと音声が再生できないような処理を追加します。
この手の処理はWebAudioAPIを用いたサンプルがネット上には転がっていますが、単にダウンロードされたことを検知したいだけで利用するには気が重いというか正直などころ面倒なので、前回同様audioタグを活かす方向で作成します。
続きを読む
[HTML5] 音声ファイルをJSで再生/停止する – audioタグ編
HTML5で音声を再生するには単純にaudio
タグを使うだけで実現できますが、今回はJavaScriptから再生や停止をコントロールしたいと思います。
続きを読む