Reference for background audios

The CMS Questions
1

I rebuilt an old audiofade script ( GitHub - kamblack/AudioFade: jQuery plugin for manipulating audio as you scroll · GitHub ) by using vanilla-js and adding a play button. This works fine in a local html-only setup but I have difficulties with referencing the audio files in a correct way in the panel. To make the thing work I write the HTML-code directly into the panel.

I would like to store the sound files in my page folder. Lets say my page structure is site/content/subpage/sound/xy.mp3 – how do I reference it? Do I need the whole link or is it enough with a relative path?

Here is the relevant part of the code, written in the panel, but it doesn’t work so far:

<audio loop id="scrollaudio"    src="https://www.fischhobel.de/inhalt/wolke/sound/planeten.mp3"></audio>
  <audio loop id="scrollaudio2"   src="https://www.fischhobel.de/inhalt/wolke/sound/verloren.mp3"></audio>
  <audio loop id="scrollaudio3"   src="https://www.fischhobel.de/inhalt/wolke/sound/purr.mp3"></audio>
  <audio loop id="scrollaudio4"   src="https://www.fischhobel.de/inhalt/wolke/sound/noise.mp3"></audio>
  <audio loop id="scrollaudio5"   src="https://www.fischhobel.de/inhalt/wolke/sound/co1.mp3"></audio>
  <audio loop id="scrollaudio6"   src="https://www.fischhobel.de/inhalt/wolke/sound/ahu.mp3"></audio>
  <audio loop id="scrollaudio7"   src="https://www.fischhobel.de/inhalt/wolke/sound/autopanasonic.mp3"></audio>
  <audio loop id="scrollaudio8"   src="https://www.fischhobel.de/inhalt/wolke/sound/voices3.mp3"></audio>
  <audio loop id="scrollaudio9"   src="https://www.fischhobel.de/inhalt/wolke/sound/theremin.mp3"></audio>
  <audio       id="scrollaudio10" src="https://www.fischhobel.de/inhalt/wolke/sound/chormix.mp3"></audio>

Here is the page: https://www.fischhobel.de/wolke

What am I doing wrong?

2

If I put the sounds a different place (for instance in the assets folder) the script runs. But it would be more elegant to have the sound files where the other files are, if only for later orientation.

3

I’m a bit lost, in particular I don’t understand the part "

Why would you put the HTML into the Panel instead of into your template?

4

Because it’s a single handtailored page for a unique purpose. I use a regular template and add custom css and js to it, as described here: Art-directed pages | Kirby CMS . It works now, because i placed the audio files used for that page in the asset folder. But for later purpose, when I might need to collect the data I’d prefer to have all the files in one place. But I dont know how to reference them.

Anyhow, thanks for taking your time!

5

IMO, it would be best to select the files in the Panel via a files field and then add the HTML in the template, not in the Panel. The files will finally land in the media folder, and the files in the media folder together with their path structure are created when the url() method is called on a file.