Closed johnjelinek closed 10 years ago
Polling is unavoidable in some cases, but in this case it looks like there is a timeupdate
event that fires regularly on <audio>
elements. We can use this to drive updates to a cell containing the elapsed time. A simple example follows:
(page "index.html"
(:require
[tailrecursion.hoplon.reload :refer [reload-all]]))
(reload-all 1000)
(defc seconds-elapsed 0)
(html
(head)
(body
(h1 "Hello, World!")
(with-let [song (audio :controls ""
(source :src "04 She's The One.mp3"))]
(.bind (js/jQuery song) "timeupdate"
#(reset! seconds-elapsed
(.floor js/Math (.-currentTime song)))))
(p (text "Seconds Elapsed: ~{seconds-elapsed}"))
(p :css {:color "red"} :toggle (cell= (>= seconds-elapsed 3))
"Over 3 seconds have elapsed!!")))
The next step would be a defelem
that does the wiring you see in the with-let
, but maybe takes a :to
cell argument to put new time values into. There's an example of a defelem like this in the contacts demo.
Oh, if you have further questions along these lines, I encourage you to join our Discourse site. It's fairly active and is a good reference as you continue Hoplon-ing. We're also in IRC, in #hoplon on Freenode, if you require realtime support :smile:
Excellent example, thank you! I'll pop on Discourse as well :)!
I'm thinking of a way to capture the currentTime of an
(audio
elem. I was thinking of a(js/setInterval
to poll a(defelem
and then maybe a(cell=
based on thecurrenetTime
. Do you recommend another approach to a scenario like this? Concretely, I want to know when audio has passed 30 seconds (whether by seek or in normal play). I don't think it's kosher to do a DOM query. I hope this makes sense.