scalajs-reactでオーディオ要素の間隔でループする

Question

audio要素を含む小さなコンポーネントを作成したいと思います。これは一定の間隔でループすることができます。区間の両端は、コンポーネントのプロパティとして定義されます。 timeUpdateイベントの精度は必ずしも正確ではありません（少なくとも33Hzの保証が必要です）、私はTimerSupportというバックエンドを使用し、開始点に戻ってcurrentTimeを設定しました。

val AudioRef = Ref[Audio]("audio") 
class PlayerBackend extends TimerSupport 
val AudioPlayer = ReactComponentB[String]("AudioPlayer") 
    .initialState(0L) 
    .backend(i => new PlayerBackend()) 
    .render_P(url => { 
    <.audio(
     ^.ref := AudioRef, 
     ^.autoPlay := true, 
     ^.controls := true, 
     <.source(^.src := "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"), 
     "Your browser does not support the audio element." 
    ) 
    }) 
    .componentDidMount({ c => 
    c.backend.setInterval(Callback.log({ 
     if (AudioRef(c).isDefined) ({ 
     AudioRef(c).get.currentTime 
     }) else "nothing" 
    }), 1000 millisecond) 
    }).configure(TimerSupport.install) 
    .build 

それは私がちょうどプレイヤーの現在位置を印刷したいのですが、何らかの理由（コールバックがときに、コンポーネントのマウント時に、バックエンドのコンテキストのコピーの上に閉じ？）AudioRef(c)ポイントのこの小さな例古いバージョンのオーディオ要素に変換します。どのようにこれを修正するための任意のアイデア？私はScalaJSやReactのどちらも経験していないので、他のデザインにも興味があります。

Answer 1

1回だけ繰り返され、その結果、1つの値が繰り返しログされます。

.componentDidMount({ c => 
    c.backend.setInterval(CallbackTo[Double] { 
    if (AudioRef(c).isDefined) ({ 
     AudioRef(c).get.currentTime 
    }) else 0 
    } >>= Callback.log, 1000 millisecond) 
}) 

それは、currentTime値（または何も）を抽出するコールバックを作成し、その値をログに記録し、別のコールバックにflatMaps：正しいコードは次のようなものになるだろう。

Answer 2

私の解決策は、現在、次のようになりますので、私は、Callbackでそのidに基づいてオーディオ要素を取得することにより、currentTimeプロパティを設定することになった。問題は、そのパラメータを評価log呼び出しである

class PlayerBackend($: BackendScope[String, Unit]) extends TimerSupport 
val AudioPlayer = ReactComponentB[String]("AudioPlayer") 
    .initialState(()) 
    .backend(i => new PlayerBackend(i)) 
    .render_P(url => { 
    <.audio(
     ^.id := "audio", 
     ^.autoPlay := true, 
     ^.controls := true, 
     <.source(^.src := "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"), 
     "Your browser does not support the audio element." 
    ) 
    }) 
    .componentDidMount({ c => 
    c.backend.setInterval(
     Callback({document.getElementById("audio").asInstanceOf[Audio].currentTime = 5.0}) , 
     1 seconds 
    ) 
}) 
.configure(TimerSupport.install) 
.build