我想构建一个包含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都没有经验。
答案 0 :(得分:1)
问题在于log
调用仅评估其参数一次,从而产生一个值,然后一遍又一遍地记录。正确的代码是这样的:
.componentDidMount({ c =>
c.backend.setInterval(CallbackTo[Double] {
if (AudioRef(c).isDefined) ({
AudioRef(c).get.currentTime
}) else 0
} >>= Callback.log, 1000 millisecond)
})
它创建一个回调,提取currentTime
值(或不提取任何值),然后将flatMaps提取到另一个记录该值的回调。
答案 1 :(得分:0)
我最终通过在currentTime
中根据id
获取音频元素来设置Callback
属性,因此我的解决方案目前看起来像这样:
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