へぇ ボタン。 トリビアの泉 リアルへぇ〜ボタン

へぇ子情報ページ

へぇ ボタン

実際のサンプルは下記に。 現在、最新版の 、、および では動くと思います。 あと手持ちの iOS 6 Safari と、 搭載 Chrome では動作確認しました。 他のスマートフォンとかは知らない。 現在 、2013年 6月 25日に正式リリース予定の、Firefox 22 以降であれば動作します。 HTML5 の audio 要素による、音声再生の部分では、Firefox の性能がいいので、Firefox 以外のブラウザだと、ボタンを連打したときに、音声がうまく再生されないんですよね。 再生が遅れたりもするし。 なので、本当は Firefox 22 以降で確認してもらう方がいいんですが。 The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state. Note: In this state, the range and step constraints are enforced even during user input, and there is no way to set the value to the empty string. から引用 数値を表す文字列をセットするための入力コントロールを表します。 ただし、正確な値が重要ではない入力コントロールになります。 サンプルの解説 ということで解説です。 まずは、へぇボタンのソースコードから。 とっても単純。 で、次に基本的なスタイルの指定ですが、. また、あとで背景を設定したりするために、縦横サイズも指定してあります。 音声再生は HTML5 audio 要素で 音声再生は HTML5 の audio 要素でやります。 「へぇ~」 の音声ファイルを mp3 形式で用意し、下記のように audio 要素で配置します。 この audio 要素自体は display: none; しちゃってもいいんですが、再生されていることがわかりやすいように表示させています。 audio 要素に対応したブラウザでは「へぇ」の音声ファイルの再生が可能です。 使用している JavaScript 全体でも大したコードじゃないので、まずは全部下記に記載して、個別に解説していきます。 load ; audio. removeClass. 次に、音声再生の処理ですが、ここも抜き出すと下記のようになります。 play ; だけでいいんですが、それだとファイルの再生が終わるまで次の再生が行われいないため、音声ファイルの再生が終わるのを待ってボタンを押さないと、その間、「へぇ~」 って言ってくれなくなってしまいます。 なので、クリックされるごとに、 audio. load ; してから、 audio. play ; することで、再生終了を待たずに次の音声を再生します。 この再生に関して、Firefox はよくできていて、次の音声を再生しても、前の音声を最後までちゃんとオーバーラップして鳴らしてくれるんですが、Chrome とか、他のブラウザだと、次の音声を再生開始するときに、前の音声をキャンセルしちゃうので、いい感じにならないんですよね。 ゲージの増加は背景画像で これをどうしようか迷ったんですけど、簡単に背景画像で対応しました。 png) という 2枚の背景画像を重ねて配置し、background-position プロパティでライトにあたる背景画像の位置を動かすことで表現しました。 png) の位置を記述しておいて、ボタンを押す度に class 属性の値を変えて、表示を切り替えていくという方法です。 CSS は下記のように単純。 range と、その子要素である p 要素に、上記の通り 2枚の背景画像を設定します。 png no-repeat center bottom;... png no-repeat center bottom;... png」 が透けて見えている状態になります。 つまりこれが、「満へぇ」 の状態ですね。 あとは、後述する JavaScript で、 div. png」 の位置を指定しておいてあげます。 sample renge. sample renge. sample renge. 以下略... 該当部分だけ抜き出してみると下記のような感じです。 removeClass. 実際に動作するサンプルは下記で確認できます。 上記サンプルのファイル一式は下記から落とせますので適当にいじってみてください。 本当は、20回以上はボタンを押せないような処理とか加えた方がよいですが、今回はそこまでやってません。 ちなみに 「へぇ」 の音声ファイルは、から音声を抽出させてもらい、MP3 形式に変換ましたが、著作権的に微妙な感じもしつつもフェアユースの範囲ってことでそこはひとつよしなに。 関連エントリー• 参考リンク•

次の

トリビアの泉 〜素晴らしきムダ知識〜

へぇ ボタン

インスト• 透過・合成用• 打ち込み• ゲームミュージック• ゲーム• キャラクター• ポップ• 3D・CG• テクスチャ• VOCALOID• MIDI• ロック• 乗り物• カラオケ• 手描き• エレクトロニカ• オーケストラ• 生演奏• テクノ• オリジナルキャラクター• モノクロ• アンビエント• ジングル• クラシック• ボーカル• テキスト• バラード• 食べ物• ジャズ• アニメ調• アニソン• J-POP• ドット絵• アイキャッチ• トランス• メタル• ヒップポップ• オルゴール• フォーク• カントリー• アイドル• 吹奏楽• 水彩画• AOR• ぬりえ•

次の

幸せになれる「へぇボタン」活用法

へぇ ボタン

音声を用意する 今回はの 32kB に書きこむので、データのサイズをメモリに乗る程度に小さくしないといけない。 という訳でメモリぎりぎりのサイズになるようサンプリング周波数を調整した。 サンプリング周波数13800Hz• モノラル• 符号なし8bit• ヘッダなし の音声ファイルをを使って用意した。 音量は割れない程度に大きめにしておいた。 ファイル名はmuri13k8. rawとした。 次に、で読み込めるように、. hファイルに8ビット符号なし整数の配列として書き出す。 適当なconv. pyを書いて変換する。 with open 'muri13k8. format data[- 1] この出力をmuri. hとして保存し、スケッチのフォルダに突っ込んでおく。 python conv. h muri. hの内容はこんな感じになる。 のバージョンは1. include include "muri. setup 関数内でが早い周波数で動くように設定している。 回避を行っている。 具体的には、digitalReadの値がボタンが押されていないときに0、押されているときに1となるのを利用して、0のあと15回1が続いた場合、信号が安定したとみなして音の再生を行う。 ボタンの数値のログを保管するのにはシフトを使い、毎回を1ビット左シフトしてLSBにdigitalReadの値を入れていく。 シフト lastval の値が0b0111 1111 1111 1111となったときにボタンが押されたときの操作を実行する 再生位置を0に更新する。 これによりが抑制されボタンを離した時に音が再生されることがほぼなくなった。

次の