html5 audio – XForms – Javascript hooks? Event Hooks? (XSLTForms)

Further to a previous question I posted – using the HTML5 audio element with XForms – I need some suggestions on how best to save and load the current time to Local Storage ?

It is relatively easy to save the current position like this – I’m not sure this is correct approach – I don’t know if there is any potential clash between Xforms and custom javascript doing this.

<audio id="audioplayer" src="{media_url}" controls="true" onpause="func()"/>

And this javascript function:

function func() {
    var audio = document.getElementById("audioplayer");
    localStorage.setItem(audio.src,audio.currentTime);
}

But loading back the value from Local Storage is trickier: since I am setting the src of the audio using Xforms, which is all done declaratively – how to trigger the equivalent javascript function when the underlying instance changes?

Can I intercept the ‘onpause’ event in Xforms? Can I hook Javascript methods into XForms etc?

I would like to stick as close to using XForms’ declarative methods as possible.