2012年1月3日火曜日

html5 audio のクリックを利用し メニューに調整した音を出す

html5でflashいらずなサイトを作りたいと…。
audioというのがものごつ便利です。

で、これを見つけまして…。これは便利だと!

メニューの音を鳴らすのもこれだったら簡単です。 
audio要素をdisplay noneにしておけばいいじゃん!



ということで加工してみました。 ←久しぶりに見たらダメになってる…

ただ、初期値だと音がデカイと思うので、これをどうしたらいいのか悩みました。
で、ボリュームを調整ってどうするの?

こっちは単純にdisplay noneにしただけのですが音の大きさが違うと思います。

これは…


$(function(){
beepOne.volume=0.01
});

というのを、スクリプトに追加しただけです。
読み込んだ際に、音を0.01にしろというjqueryを書いたらよい。

これをへたにクリックすると音が小さくなるとするとうまくいかないらしい。
検索すると 1-0.1となっているのですが、なんか 0.01 にしたらうまくいったんですけど…ironでしかテストしてないので何とも…。

それにしても短いスクリプトで簡単に実現できてすばらしいのではないでしょうか!


このサイトものごつ勉強になります。 

おいかけてくるメニューも良さげです。スクリプト短いし…

html5 よろしいなぁ。 これじゃないとイヤって気持ちになってきました。

確認したところ…やはりIE8ではめんどくさいエラーが出まくりますので、こちらの魔法の言葉で回避しましょう~


尚、html5ですが、私発見したのですが、 localhostの環境だとうまく表示されないので超悩んでいました。なんかエラーが出るんです。

でも、はたと気が付きました
拡張子を htm にしとかないとエラーが出ます。 html だとダメです!
ここのひな形を見てはたと気がつきました! もうXAMPPの設定ばっかり検索してたよ。

これ初心者わかんないと思うけどな。ツイートしたけど反響なかったけど…皆知ってるのかしら?


いやぁ。知らんというのはそういうものですねぇ。
html5 と css3 こういうのをじっくり端から読みたいなぁ。 ホンマにいくら時間があっても足りません。

わかりやすいcss3の説明サイト…カッコいい



オススメ!
原発反対


CSS3で線(border)をグラデーションさせるテクニック

HTML5 のmp3プレイヤー いいかも

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索

View My Stats