シークバーを搭載した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)
});