https://www.kunsthauswien.com/assets/js/utilities/audioHandler.js

1export function initAudioPlayer() {
2  if (!document.querySelector('.audio-player')) return;
3
4  const audioPlayer = document.querySelector('.audio-player');
5  const audioPlayerWaveform = audioPlayer.querySelector('.audio-player__waveform');
6  const audioPlayerButtons = audioPlayer.querySelector('.audio-player__buttons');
7  const playButton = audioPlayer.querySelector('.play-button');
8  const pauseButton = audioPlayer.querySelector('.pause-button');
9  const timeDisplay = audioPlayer.querySelector('.audio-player__time');
10  const audioSource = audioPlayer.dataset.source;
11
12  const formatTime = (seconds) =>
13    [seconds / 60, seconds % 60]
14      .map((v) => `0${Math.floor(v)}`.slice(-2))
15      .join(':');
16
17  // Create WaveSurfer
18  const wavesurfer = WaveSurfer.create({
19    container: audioPlayerWaveform,
20    waveColor: '#1e291e',
21    progressColor: '#89ff00',
22    url: audioSource,
23
24    cursorWidth: 0,
25    barWidth: 3,
26    barGap: 6,
27    barRadius: 10,
28    dragToSeek: true,
29  });
30
31  wavesurfer.on('ready', () => {
32    const duration = wavesurfer.getDuration();
33    if (timeDisplay) {
34      timeDisplay.textContent = `${formatTime(duration)}`;
35    }
36  });
37
38  //
39  // UI CONTROL LOGIC
40  //
41  const updateButtons = (isPlaying) => {
42    if (isPlaying) {
43      playButton.classList.remove('active');
44      pauseButton.classList.add('active');
45    } else {
46      pauseButton.classList.remove('active');
47      playButton.classList.add('active');
48    }
49  };
50
51  playButton.addEventListener('click', () => wavesurfer.play());
52  pauseButton.addEventListener('click', () => wavesurfer.pause());
53
54  //
55  // WAVESURFER EVENTS
56  //
57
58  // Fires repeatedly as audio plays
59  wavesurfer.on('timeupdate', (currentTime) => {
60    if (timeDisplay) {
61      timeDisplay.textContent = formatTime(currentTime);
62    }
63  });
64
65  // When playback state switches
66  wavesurfer.on('play', () => updateButtons(true));
67  wavesurfer.on('pause', () => updateButtons(false));
68  wavesurfer.on('finish', () => updateButtons(false));
69
70}