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 の位置に戻りません。手動で戻してください。