シークバーを搭載したAudioプレイヤーのデモ
ここ一週間でコツコツ改良を進めていた HTML5 Forms の <input type="range"> 風味なスライダーコントロールと、 <audio> のラッパーがいい感じになったので簡単なデモを作りました。
http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/audio/player.htm
IE6+ / Firefox / Safari / Chrome / Opera / iPhone(iOS4) で動きます。Android は持っていないので試していませんが、動きそうです。
ブラウザによっては、データのキャッシュが完了していないと上手くシークできないことがあります。
# mp3 や m4aファイルを http://uupaa-js.googlecode.com/svn/trunk/ からダウンロードし、ローカルで動かすとシークできたりするので、ホスト先(Google Code)の転送速度の問題もあるようです。
スライダーコントロールのデモもあるよ
http://uupaa-js.googlecode.com/svn/trunk/0.8/test/ui/slider.htm
スライダーのサイズは 50 / 100 / 150 / 200 の四種類で、向きは横と縦があります。
HTML5 Formnize ボタンをクリックすると <input type="range" ui="Slider"> を uu.Class.Slider で置換し、type="range"が利用できない環境でも、やりたいことができるようになっています。
カスタマイズ
uu.Class.Slider を継承し、SliderBuild と SliderTransform をオーバーライドし、CSSスプライト用の画像を用意すれば、独自の見栄えを持ったスライダーを作成することも可能です。
// uu.Class.Slider - generic Slider class uu.Class("Slider", { // public methods init: SliderInit, // init(rail:Node, grip:Node, param:Hash = {}) attr: SliderAttr, // attr(key:String/Hash = void, value:String/Number/Boolean = void):Mix/void bind: SliderBind, // bind(eventType:EventTypeString, evaluator:Function) unbind: SliderUnbind, // unbind(eventType:EventTypeString) msgbox: SliderMsgBox, // msgbox(msg:String, param:Hash = void):Hash // [1][get attr] uu.msg.post(instance, "attr") -> Hash // [2][bind] uu.msg.post(instance, "bind", { node, type, callback }) // [3][unbind] uu.msg.post(instance, "unbind", { node, type, callback }) // [4][set value] uu.msg.post(instance, "value", 100) // [5][set value fx] uu.msg.post(instance, "value", 100, 100) // [6][get value] uu.msg.post(instance, "value") -> 100 handleEvent: SliderHandleEvent // handleEvent(evt:Event) }, { // static public methods build: SliderBuild, // build(param:Hash, backyard:Node = <body>):Array transform: SliderTransform, // transform(node:Node):Array isTransform: SliderIsTransform // isTransform(node:Node) });