にゃ〜〜ん！ : ういすぷの記録帳

ボタンを押したら「にゃ〜ん」って鳴る。
それだけです！
こう言うページ（ソフト/サービス）も面白いかな。

連打も出来ますよ！

直接ページへアクセスする場合は、こちらのURLからとなります。


詳細とか、考え方とか
JavaScript、jQueryを利用して実現しています。
また、HTML5の<audio>タグを利用して音声・音楽ファイルの再生を実現しています。
オーディオファイルは、都度ロードするのではなく、BASE64で変換し、HTMLもしくはJavaScriptソース内に埋め込んでいます。こうすることで、ページの表示でロードが終わる様にしました。
なお、変換は、先日公開した「JavaScript BASE64 変換」で行えます。

BASE64にするとファイルサイズが大きくなりますが、一つのファイルで完結できるので良いかなと思います。
<audio>タグで、BASE64を使う場合は、src=""の中に、src="data:audio/mpeg;base64,〜〜〜"という感じに挿入すると使えます。便利！


※ 音声は「CeVIO Creative Studio FREE」で作成しています。
※ 無料でご利用できます。
※ ブラウザに依存しますので、利用出来ないブラウザもあります。
※ スマホなど処理能力の低いハードウェアでは、連打がうまく動きません。


□ 関連記事
・JavaScript BASE64 変換
・「PSO2 ACスクラッチアイテムカタログ」作ってみた。
・CSS3で文字をぶるぶる震わす！
・background-image で比率を維持しながらレスポンシブ表示させる。
・Facebook のソーシャルカウント数を取得する
・大量のファイルを tar したい時のメモ
・さくらインターネットの.mailfilterを使って、件名が英数字、記号のスパムに対策をしました。
・パラメータ付URLを.htaccessでリダイレクトするメモ
・[Add-on Stylish] Web版Twitterのタイムラインに表示される画像、プロモーションの表示を設定するStylishのCSS （暫定）
・画像をクリックするとその場で拡大表示するようにしました。