Audio

<div class="module module--audio">
  <div class="inner inner--medium">
          <div class="player">
        <div class="audio" data-url="https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/Audio-Example-Piano.mp3" data-title="Audio Example Piano">
          <div class="audio__playpause">
            <div class="amplitude-play-pause">
              <span class="play">
                <svg width="16" height="19" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 9.5L0 19V0z" fill="currentColor" fill-rule="evenodd" />
                </svg>
              </span>
              <span class="pause">
                <svg width="14" height="19" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 19V0v19zm10 0V0v19z" stroke="currentColor" stroke-width="4" fill-rule="evenodd" />
                </svg>
              </span>
            </div>
          </div>
          <div class="audio__title">
            <span data-amplitude-song-info="name" class="data-amplitude-song-info song-name"></span>
          </div>
          <div class="audio__progress">
            <span class="current-time">
              <span class="amplitude-current-minutes"></span>:<span class="amplitude-current-seconds"></span>
            </span>
            <div class="progress">
              <input type="range" class="amplitude-song-slider" step=".1" />
              <progress class="amplitude-song-played-progress" id="song-played-progress"></progress>
            </div>
            <div class="volume">
              <span class="amplitude-mute">
                <svg width="24" height="20" xmlns="http://www.w3.org/2000/svg">
                  <g fill="none" fill-rule="evenodd">
                    <path d="M6 14.2l6.1 5.4V0l-6 5.5H0v8.7h6z" fill="currentColor" />
                    <path d="M16.7 6.4s3.2 2.7 0 6.3M19.4 2.4s7.7 6.4 0 15" stroke="currentColor" stroke-width="2" stroke-linecap="square" />
                  </g>
                </svg>
              </span>
              <div class="volume__slider">
                <input type="range" class="amplitude-volume-slider" />
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
</div>

import Amplitude from 'amplitudejs';

(function () {
  function init() {
    const titles = [];
    document.querySelectorAll('.module--audio').forEach((module, index)=>{
      const track = module.querySelector('.audio');
      if(track){
        const { dataset: { title, url } } = track;
        titles.push({
          "name": title,
          "url": url
        })
        module.querySelectorAll('[class*=amplitude').forEach(element => {
          element.dataset.amplitudeSongIndex = index;
        });
        Amplitude.init({ "songs": titles });
      }
    })
  }
  document.addEventListener("DOMContentLoaded", init);
})();