映画などの映像作品やゲームでは、左で発生した音は左側のスピーカーから、右側の音は右側のスピーカーから強く出力した方が臨場感が増すため日常的に利用されています。HTML5ではWebAudioAPIを簡単に扱えるHowler.jsで手軽に実現することができます。

複数の画像を1枚にまとめるCSSスプライトはかなり前から利用されていますが、今回はその音声ファイル版である「AudioSprite」を作成してみます。 音声ファイルの作成にはNode.jsのモジュール「audiosprite」を、再生には「Howler.js」を利用します。

WebAudioAPIを簡単に扱えるHowler.jsにはtimeupdateイベントがありません。もし再生時間に合わせて何らかの処理を行う場合には自分でがんばる必要があります。今回はsetInterval()を使ってかんたんな実装を行ってみます。

以前取り上げた通り、音声ファイルを再生したり止めるだけであればタグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますｗ WebAudioAPIを使えばあらゆることが自由…

今回は音声ファイルを音量が徐々に上がっていく「フェードイン」する形で再生を開始、逆に音量が徐々に下がっていく「フェードアウト」し再生を終了することに挑戦してみます。 通常は以下のようにplay()で開始するわけですが、これだと音量MAXで始まってし…

前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。例えばボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダ…

HTML5で音声を再生するには単純にaudioタグを使うだけで実現できますが、今回はJavaScriptから再生や停止をコントロールしたいと思います。