widget-code.tsx

import { Fragment, useEffect, useRef } from 'react';
import { useEditorState, Icon } from 'vev';

export default function({ text }: Props) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const handlePlay = () => {
    if(audioRef.current) {
      audioRef.current.play(); // plays audio
    }
  }

  const handlePause = () => {
    if(audioRef.current) {
      audioRef.current.pause(); // pause audio
    }
  }

  const handleTimeUpdate = (updateEvent:Event) => {
    console.log("current time", audioRef.current.currentTime); // use this to create a scrubber / timeline
  }

  useEffect(() => {
    console.log("got audio");
    audioRef.current.addEventListener('timeupdate', handleTimeUpdate);
  }, [audioRef.current])

  return (
    <Fragment>
      <div className="controls fill">
        <Icon d="play" onClick={handlePlay} />
        <Icon d="pause" onClick={handlePause} />
      </div>
      <audio ref={audioRef}>
        <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg" />
        <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
      </audio>
    </Fragment>
  );
}

widget-styles.scss

:host{
}

.controls {
  display: vev(flex);
  flex-direction: vev(row);
  align-items: vev(center);
  background: vev();
  font-size: vev(24px);
}