Templating a persistant element between pages

I have a website which allow a user to play a sound file whilst they browse my website. I wrote the site in Angular originally which let me route using javascript but was overkill really since the rest of the content is static. A static site would reload the audio on page load so would interrupt the browsing.

The only way I can think of doing this is loading static pages using an iframe but I’d like to have deep-linking etc. Does Hugo have any helpers/shortcodes or other mechanism for working with iframes e.g. link generation that would also update the address bar?

Is there another option I have missed?

you can do it with iframe, sample is there

You can build your own shortcode to play some music.

Think about page resources

or assets