OT: How to add **background** music in hugo static website?

support
1

I added the following code in my markdown or homepage, it could play music.

<audio id="music-player" autoplay controls>
    <source type="audio/mp3" src="https://webfs.yun.kugou.com/202104080013/9e674c6831f9e01abcc1ec89b79a84fc/G103/M03/18/11/R5QEAFvsUeWAc6GqAC5YF1JSTTI941.mp3"></source>
    <p>Your browser does not support the audio element.</p>
</audio>

<script>
    var player = document.getElementById("music-player");
    player.volume = 0.2;
</script>

but, hugo generates static site, I think every page is a new webpage, when I click another blog link, it returns a new webpage, so the music is reloaded and played from the beginning.

This isn’t what I want. I want to keep playing the music when user navigate in the website.

Please help if we could realize this?

Thanks for direct me to the right position, I found this: GitHub - cshum/scm-music-player: Seamless music for your website. HTML5 music player with continuous playback cross pages..

If anyone want to realize this kind of function, maybe this helps.

2

This question is off-topic. Please have a look at the forum guidelines

You need to search the web for ways to make a persistent audio player on your website with JS.

1 Like