[Redmine] ログイン時にかっこいい効果音を鳴らす

Redmine JavaScript audio base64 DataURISchema view_customize jQuery

小ネタです。 Redmineのような作業工程を管理するソフトって人間扱いされてない感じがして、ぶっちゃけテンション上がらないじゃないですかｗというわけでログイン時にかっちょいい効果音をバーン！と鳴らして少しでもモチベーションを上げたいと思います。…

[HTML5] 音声の発生源をステレオで調整する - howler.js編

HTML5 JavaScript audio 音声再生 WebAudioAPI howler.js バニラ求人

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

HTML5 JavaScript audio 音声再生 WebAudioAPI howler.js AudioSprite

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

HTML5 JavaScript setInterval audio 音声再生 howler.js timeupdate

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

HTML5 audio 音声再生フェードインフェードアウト WebAudioAPI howler.js

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

HTML5 JavaScript setInterval audio 音声再生フェードインフェードアウト

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

HTML5 JavaScript audio 音声再生 base64 DataURISchema 事前ロード FetchAPI

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

HTML5 JavaScript audio 音声再生

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