1. /
  2. フェードイン

フェードイン

[HTML5] 要素をフェードアウト/フェードインする

指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。

ここでは大きく2種類の方法を取り上げます。
HTML5から登場したWeb Animation APIを利用したものと、はるか以前から利用されてきたsetInterval利用する物です。IE11を対象としないのであれば前者の方が滑らかに動いてくれるのでおすすめです。
続きを読む

[HTML5] 音声ファイルをJSで再生/停止する – howler.js編

以前取り上げた通り、音声ファイルを再生したり止めるだけであれば<audio>タグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますｗ 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を採用する必要があります。

続きを読む