const {t} = ef

const MyAudioPlayer = t`
.All audio controls are implemented without a single line of extra JavaScript.
>br
>audio
  %currentTime@timeupdate = {{trackCurrentTime}}
  %duration!@canplay = {{trackDuration}}
  %src = {{src}}
  %autoplay = {{autoplay = true}}
  #controls
>div
  .Select an audio file: &
  >input
    #type = file
    #accept = audio/*
    %files!@change = {{files}}
  >br
  .Custom progress bar: &
  >input
    #type = range
    #step = 0.01
    #max = {{trackDuration = 0}}
    %value = {{trackCurrentTime = 0}}
  >br
  .Autoplay: &
  >input
    #type = checkbox
    %checked = {{autoplay}}
  >pre
    |Current time: {{trackCurrentTime}}
    |Total length: {{trackDuration}}
`

const myPlayer = new MyAudioPlayer()

myPlayer.$subscribe('files', ({state, value}) => {
  if (value && value[0]) {
    state.$data.src = URL.createObjectURL(value[0])
  }
})

myPlayer.$mount({target: document.body})