WWW Watch

記事に戻る

HTML5 input type="range" で作る へぇボタン サンプル

Chrome や Safari、さらにIE10 も対応していますし、残っていた Firefox も、2013年 5月 14日時点で Beta Channel (参考エントリーはこちら) の Firefox 22 が HTML5 の input type="range" に対応したので記念のお遊び。

詳しくは記事 「HTML5 input type="range" で作る 「へぇボタン」」 をご覧ください。

動作環境

2013年 5月 15日時点で Beta Channel の Firefox 22 以降、最新版の Safari、Chrome 及び、IE10 では動くと思います。あと手持ちの iOS 6 搭載 Safari、及び Nexus 7 搭載 Chrome では動作確認しました。他のスマートフォンとかは知らない。

その他

ボタンを押すと音声が出ますので、ご注意ください。また、Firefox 以外では、ボタンを速く連打されると、音声再生がうまくいきません。ゆっくり押してお楽しみください。

input type="range" のフォームパーツや音声ファイルの再生インターフェースはあえて表示させています。あと、Firefox はページをリロードしてもスライダーが 0 の位置に戻りません。手動で戻してください。