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})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/ef.js/dist/ef.dev.js