Home > 10月 17th, 2007

2007.10.17

はてなスターに効果音再生機能を付けてみたよ!おっぱい!

やってみたらできたよー

書いてみた!とりあえず☆つけて確かめればいいよ!
11種類の音がランダムで鳴ります。うるさいね!
気持ちのいいスイッチ音とか、「へぇ~」の声なんかだとうまく働くかも。

ちなみに開発中は「富竹フラッシュ!」でした。星だけに。
感動したエントリに星を付けたら「富竹フラッシュ!」と鳴るような、そんな世の中は間違ってるとおもった。

ごめんねごめんね><

あまりにもうるさいから今はちょっとこの機能切ってるの///

はてスタに効果音を付けるための手順をものすごく簡単に

1.ライブラリを読み込む
<script type=”text/javascript” src=”http://www.masayashi.com/js/soundmanager/soundmanager2.js”></script>

2.HatenaStar.js -> HatenaStarSE.js
<script type=”text/javascript” src=”http://s.hatena.ne.jp/js/HatenaStar.js”></script>
↓ 変更
<script type=”text/javascript” src=”http://www.masayashi.com/js/HatenaStarSE.js”></script>

3.再生のための記述を書く
<script type=”text/javascript”>
function playSound() {
  soundManager.play(”HatenaStar”,”mp3ファイルのURL”);
}
</script>

4.たしかめる

はてスタに効果音を付けるための手順をもうすこし丁寧に

Flashと連携することにより、Javascriptからmp3の操作を可能にしたSoundManager 2というライブラリを使用しています。
まずはこのライブラリを読み込んでおきましょう。
こんな感じですね。

<script type="text/javascript" src="http://www.masayashi.com/js/soundmanager/soundmanager2.js"></script>

次。
はてなスターを設置したときに、

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type=”text/javascript”>
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','entry-title'];
Hatena.Star.Token = ‘e87c41045ae2146685c46539118b70f044fc56b5′;
</script>

上記のようなコードをどこかに挿入したと思います。このjsファイルを自前で用意してやります。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
↓ 変更
<script type=”text/javascript” src=”http://www.masayashi.com/js/HatenaStarSE.js”></script>

HatenaStarSE.js は、元のHatenaStar.js に加えて
「星をつけるときに playSound(); という関数も一緒に呼んでお願い><」
というおまじないをかけてあります。

つまり、あとはこの playSound(); の関数内に星を付けたときの挙動を書いてやればいいわけです。
こんな感じかなー。

<script type="text/javascript">
function playSound() {
soundManager.play(”HatenaStar”,”http://www.masayashi.com/materials/mp3/higurashi/flash.mp3″);
}
</script>

soundManagerの詳しい使い方は公式をあたってもらうとして、上記のプログラムを説明すると、
「playSound()が呼ばれたら “http://www.~~/flash.mp3″ を “HatenaStar” ってIDで再生して!」
ってことです。

つまり、このURLの部分を再生したいmp3ファイルのURLに書き換えればいいんじゃね?
ランダム再生させたい場合は、Javascript勉強してplaySound()内に書けばいいんじゃないかとおもうよ!

ごにょごにょ

元ネタ:
はてなアイデア - [☆+]をクリックするとき気持ちのいい効果音が鳴って欲しい。 意味なくいくらでも押せるところが一番気に入ってるので。 もちろんクッキーで音のオンオフは設定できるように。

そうそう、クッキーでオンオフができるのが一番いい。でもぼくの技術力じゃ無理っぽいね!ざんねん!

実際のところ、はてスタクリックでいきなり音が鳴るっていうのはあまり気持ちのよいものではないと思う。ネタにはなるけどねー。「カチッ」系の音なら気持ちよく働くかもしれない。模索してみてください。ぼくはあまり常用する気にはなれないのだけれど、エントリ書いた手前はずせなくなっちゃった。

もしなにか気が違って「わたしも効果音つけてみた!」って人がいれば、コメントいただけると嬉しいです。
連打しに行きます。

エラー音割り当てのアイディアはemaさん。
スペシャルサンクス。

はてな非会員用に、こちら↓に音が鳴るだけのリンクを用意しております。
【デバッグ用エントリ】はてなスターを押したとき効果音鳴ったら面白くね? | 王様の箱庭

これだけでも十分楽しいのが困ったものです。
再起動音が三回連続で鳴ったときは、すごくみじめな気持ちになった。