« グーグル、はてなアンテナにフレンドリーな全画面flash | main | JavaScript でのパッケージの実装方法 »
2005年06月07日
JavaScript で音を制御してみたよ
ブログのリンクをマウスオーバーすると、効果音がなるようにしました（ページのロードが終了してからだけど）。
基本的に不可能なはずの、JavaScriptによるサウンドコントロールです。
Ajaxのユーザビリティの向上にでもどうぞ。ソースはこちら。
使用をする場合は、
・WEBページのエンコードとjsファイルのエンコードを同じにすること
・jsコード内のswfファイルへのパスを、自分のサーバーの絶対パスに変更すること
にご注意ください
現在の所、対応ブラウザはほぼパーフェクツ。
win IE6/FF1/OP7
mac IE5.5/Saf1.3/FF1.1
まぁ、タネとしては音声再生用のコンポーネントをflashで作成し、それをJavaScriptで制御しているわけです。
一応過去にも、flashを利用してajaxに効果音やBGMをつけるで紹介したように、先行事例はあるのですが、従来のLiveConnectionを使ったJavaScript-Flash通信っていうのは、基本的にIEとFFでしかサポートされてませんでした。
そこでマウスイベントをハンドリングして、音を再生するだけのSWFをDOMで強制リロード、というアホなぐらいの超直球であらゆる難関を突破してみました。
ajaxのローディング終了時に音をならすと、カッコいいかつユーザビリティが向上してよいです。
see also コンポーネント指向Ajaxの世界
投稿者 Taka : 2005年06月07日 03:06
book
bookmark
trackbacks
this entry's trackback URL:
http://www.fladdict.net/cgi-bin/mt3/mt-tb.cgi/200
このリストは、次のエントリーを参照しています: JavaScript で音を制御してみたよ:
» マウスオーバーで音を鳴らす from あの頃のように…
JavaScriptで音を制御してみたよとても面白そうだったので あれこれポップアップ に続いて導入してみたのですが、ActiveX の受け入れ状態によっては面... [read more]
トラックバック時刻: 2005年06月09日 02:07
» リンクに特有＆共通イベントを両方登録してみよう from 二匹狼の遠吠え
fladdict.netの過去のエントリJavaScript で音を制御してみた... [read more]
トラックバック時刻: 2005年06月10日 07:51
» リンクに特有＆共通イベントを両方登録してみよう from 二匹狼の遠吠え
fladdict.netの過去のエントリJavaScript で音を制御してみた... [read more]
トラックバック時刻: 2005年06月10日 08:01
» JavaScript 音をリンクに鳴らすと、楽しい from さようなら、ギャングたち :: JavaScript 音をリンクに鳴らすと、楽しい
JavaScript で音を制御してみたよ設定は、・SoundUnit.swfを配置した場所への絶対パス [read more]
トラックバック時刻: 2006年03月01日 02:27
comment
イイですね！
でもmainページのコメントポップアップがなくなってますね。あれかなり便利だったんですが…
by dotimpact : 2005年06月07日 08:07
IEのイベントモデルがしょぼ過ぎて一時停止中です（笑）･･･
W3CのaddEventListenerによる、イベントの多重登録になれちゃって（笑
IE式のonmouseoverでコールバックをする方法だと、きれいに２つイベント登録（音とポップアップ）するにはどうすればいいんでしょうね。
by Taka : 2005年06月07日 11:28
これ良いね！
音の内容を音声案内にしたら、かなりナビゲーションが明るくなりそうだね。
by K o z : 2005年06月07日 16:40
アイデアもいいしもの凄く楽しいと思うんですが、ActiveXを無効にしてるとマウスオーバーするたびにダイアログが……
JavaScriptって、ActiveXの有効無効の判別って出来ませんでしたっけ？
by 通りすがり : 2005年06月07日 18:52
>アイデアもいいしもの凄く楽しいと思うんですが、ActiveXを無効にしてるとマウスオーバーするたびにダイアログが……
houkoku arigatou gozaimasu!!
Wasuretemasita!!! kitakugo ni syu-sei simasu!!
by Taka : 2005年06月07日 19:08
こんにちは。いつも注目しております。
＞W3CのaddEventListenerによる、イベントの多重登録になれちゃって（笑
＞IE式のonmouseoverでコールバックをする方法だと、きれいに２つイベント登録（音とポップアップ）するにはどうすればいいんでしょうね。
イベントの多重登録には、GoFのObserverパターン（あるいはPublisher/Subscriberパターン）を使うのはいかがでしょうか？
http://masarl.cocolog-nifty.com/main/2004/09/observable.html
「addEventListener」を自前で実装するようなものかもしれません。
それによってアーキテクチャがキレイになるから仕方ない、と割り切れたら。
ちなみに、大きなプログラムを書く場合には、具体的なメリットがありそうです。
イベント関連の処理を直接DOMに紐付けないことで「イベント」「イベントハンドラ」などの抽象度が（ブラウザやDOMのレベルより）上がるので、より高級な制御をしやすくなるかと。
具体的にはDoc/ViewアーキテクチャやMVCモデルなどを使うような規模の話になってくると思います。
by ゼロベース石橋 : 2005年07月13日 00:22
すいません、6月3日のエントリに書かれてましたね。
失礼しました！
by ゼロベース石橋 : 2005年07月13日 01:00