add fancy frontend player

static/player.js

@@ -0,0 +1,405 @@
+/*!
+ *  Howler.js Audio Player Demo
+ *  howlerjs.com
+ *
+ *  (c) 2013-2020, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+// Cache references to DOM elements.
+var elms = ['track', 'timer', 'duration', 'playBtn', 'pauseBtn', 'prevBtn', 'nextBtn', 'playlistBtn', 'volumeBtn', 'progress', 'bar', 'wave', 'loading', 'playlist', 'list', 'volume', 'barEmpty', 'barFull', 'sliderBtn'];
+elms.forEach(function(elm) {
+  window[elm] = document.getElementById(elm);
+});
+
+/**
+ * Player class containing the state of our playlist and where we are in it.
+ * Includes all methods for playing, skipping, updating the display, etc.
+ * @param {Array} playlist Array of objects with playlist song details ({title, file, howl}).
+ */
+var Player = function(playlist) {
+  this.playlist = playlist;
+  this.index = 0;
+
+  // Display the title of the first track.
+  track.innerHTML = '1. ' + playlist[0].title;
+
+  // Setup the playlist display.
+  playlist.forEach(function(song) {
+    var div = document.createElement('div');
+    div.className = 'list-song';
+    div.innerHTML = song.title;
+    div.onclick = function() {
+      player.skipTo(playlist.indexOf(song));
+    };
+    list.appendChild(div);
+  });
+};
+Player.prototype = {
+  /**
+   * Play a song in the playlist.
+   * @param  {Number} index Index of the song in the playlist (leave empty to play the first or current).
+   */
+  play: function(index) {
+    var self = this;
+    var sound;
+
+    index = typeof index === 'number' ? index : self.index;
+    var data = self.playlist[index];
+
+    // If we already loaded this track, use the current one.
+    // Otherwise, setup and load a new Howl.
+    if (data.howl) {
+      sound = data.howl;
+    } else {
+      sound = data.howl = new Howl({
+        src: [ './' + data.file ],
+        html5: true, // Force to HTML5 so that the audio can stream in (best for large files).
+        onplay: function() {
+          // Display the duration.
+          duration.innerHTML = self.formatTime(Math.round(sound.duration()));
+
+          // Start updating the progress of the track.
+          requestAnimationFrame(self.step.bind(self));
+
+          // Start the wave animation if we have already loaded
+          wave.container.style.display = 'block';
+          bar.style.display = 'none';
+          pauseBtn.style.display = 'block';
+        },
+        onload: function() {
+          // Start the wave animation.
+          wave.container.style.display = 'block';
+          bar.style.display = 'none';
+          loading.style.display = 'none';
+        },
+        onend: function() {
+          // Stop the wave animation.
+          wave.container.style.display = 'none';
+          bar.style.display = 'block';
+          self.skip('next');
+        },
+        onpause: function() {
+          // Stop the wave animation.
+          wave.container.style.display = 'none';
+          bar.style.display = 'block';
+        },
+        onstop: function() {
+          // Stop the wave animation.
+          wave.container.style.display = 'none';
+          bar.style.display = 'block';
+        },
+        onseek: function() {
+          // Start updating the progress of the track.
+          requestAnimationFrame(self.step.bind(self));
+        }
+      });
+    }
+
+    // Begin playing the sound.
+    sound.play();
+
+    // Update the track display.
+    track.innerHTML = (index + 1) + '. ' + data.title;
+
+    // Show the pause button.
+    if (sound.state() === 'loaded') {
+      playBtn.style.display = 'none';
+      pauseBtn.style.display = 'block';
+    } else {
+      loading.style.display = 'block';
+      playBtn.style.display = 'none';
+      pauseBtn.style.display = 'none';
+    }
+
+    // Keep track of the index we are currently playing.
+    self.index = index;
+  },
+
+  /**
+   * Pause the currently playing track.
+   */
+  pause: function() {
+    var self = this;
+
+    // Get the Howl we want to manipulate.
+    var sound = self.playlist[self.index].howl;
+
+    // Puase the sound.
+    sound.pause();
+
+    // Show the play button.
+    playBtn.style.display = 'block';
+    pauseBtn.style.display = 'none';
+  },
+
+  /**
+   * Skip to the next or previous track.
+   * @param  {String} direction 'next' or 'prev'.
+   */
+  skip: function(direction) {
+    var self = this;
+
+    // Get the next track based on the direction of the track.
+    var index = 0;
+    if (direction === 'prev') {
+      index = self.index - 1;
+      if (index < 0) {
+        index = self.playlist.length - 1;
+      }
+    } else {
+      index = self.index + 1;
+      if (index >= self.playlist.length) {
+        index = 0;
+      }
+    }
+
+    self.skipTo(index);
+  },
+
+  /**
+   * Skip to a specific track based on its playlist index.
+   * @param  {Number} index Index in the playlist.
+   */
+  skipTo: function(index) {
+    var self = this;
+
+    // Stop the current track.
+    if (self.playlist[self.index].howl) {
+      self.playlist[self.index].howl.stop();
+    }
+
+    // Reset progress.
+    progress.style.width = '0%';
+
+    // Play the new track.
+    self.play(index);
+  },
+
+  /**
+   * Set the volume and update the volume slider display.
+   * @param  {Number} val Volume between 0 and 1.
+   */
+  volume: function(val) {
+    var self = this;
+
+    // Update the global volume (affecting all Howls).
+    Howler.volume(val);
+
+    // Update the display on the slider.
+    var barWidth = (val * 90) / 100;
+    barFull.style.width = (barWidth * 100) + '%';
+    sliderBtn.style.left = (window.innerWidth * barWidth + window.innerWidth * 0.05 - 25) + 'px';
+  },
+
+  /**
+   * Seek to a new position in the currently playing track.
+   * @param  {Number} per Percentage through the song to skip.
+   */
+  seek: function(per) {
+    var self = this;
+
+    // Get the Howl we want to manipulate.
+    var sound = self.playlist[self.index].howl;
+
+    // Convert the percent into a seek position.
+    if (sound.playing()) {
+      sound.seek(sound.duration() * per);
+    }
+  },
+
+  /**
+   * The step called within requestAnimationFrame to update the playback position.
+   */
+  step: function() {
+    var self = this;
+
+    // Get the Howl we want to manipulate.
+    var sound = self.playlist[self.index].howl;
+
+    // Determine our current seek position.
+    var seek = sound.seek() || 0;
+    timer.innerHTML = self.formatTime(Math.round(seek));
+    progress.style.width = (((seek / sound.duration()) * 100) || 0) + '%';
+
+    // If the sound is still playing, continue stepping.
+    if (sound.playing()) {
+      requestAnimationFrame(self.step.bind(self));
+    }
+  },
+
+  /**
+   * Toggle the playlist display on/off.
+   */
+  togglePlaylist: function() {
+    var self = this;
+    var display = (playlist.style.display === 'block') ? 'none' : 'block';
+
+    setTimeout(function() {
+      playlist.style.display = display;
+    }, (display === 'block') ? 0 : 500);
+    playlist.className = (display === 'block') ? 'fadein' : 'fadeout';
+  },
+
+  /**
+   * Toggle the volume display on/off.
+   */
+  toggleVolume: function() {
+    var self = this;
+    var display = (volume.style.display === 'block') ? 'none' : 'block';
+
+    setTimeout(function() {
+      volume.style.display = display;
+    }, (display === 'block') ? 0 : 500);
+    volume.className = (display === 'block') ? 'fadein' : 'fadeout';
+  },
+
+  /**
+   * Format the time from seconds to M:SS.
+   * @param  {Number} secs Seconds to format.
+   * @return {String}      Formatted time.
+   */
+  formatTime: function(secs) {
+    var minutes = Math.floor(secs / 60) || 0;
+    var seconds = (secs - minutes * 60) || 0;
+
+    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+  }
+};
+
+// Setup our new audio player class and pass it the playlist.
+var player = new Player([
+  {
+    title: 'Ö1 Morgenjournal',
+    file: 'stream',
+    howl: null
+  }
+]);
+
+// Bind our player controls.
+playBtn.addEventListener('click', function() {
+  player.play();
+});
+pauseBtn.addEventListener('click', function() {
+  player.pause();
+});
+prevBtn.addEventListener('click', function() {
+  var sound = player.playlist[player.index].howl;
+
+  if (sound && sound.playing()) {
+    var currentSeek = sound.seek() || 0;
+    var newSeek = currentSeek - 10; // Subtract 10 seconds
+    var duration = sound.duration();
+
+    // Make sure we don't seek beyond the end of the track
+    if (newSeek > 0) {
+      sound.seek(newSeek);
+    } else {
+      // If seeking would go past the beginning, go to the beginning
+      sound.seek(0); 
+    }
+  }
+});
+nextBtn.addEventListener('click', function() {
+  var sound = player.playlist[player.index].howl;
+
+  if (sound && sound.playing()) {
+    var currentSeek = sound.seek() || 0;
+    var newSeek = currentSeek + 10; // Add 10 seconds
+    var duration = sound.duration();
+
+    // Make sure we don't seek beyond the end of the track
+    if (newSeek < duration) {
+      sound.seek(newSeek);
+    } else {
+      // If seeking would go past the end, go to the end
+      sound.seek(duration - 0.1); // Leave a small buffer to avoid issues
+    }
+  }
+});
+waveform.addEventListener('click', function(event) {
+  player.seek(event.clientX / window.innerWidth);
+});
+playlistBtn.addEventListener('click', function() {
+  player.togglePlaylist();
+});
+playlist.addEventListener('click', function() {
+  player.togglePlaylist();
+});
+volumeBtn.addEventListener('click', function() {
+  player.toggleVolume();
+});
+volume.addEventListener('click', function() {
+  player.toggleVolume();
+});
+
+// Setup the event listeners to enable dragging of volume slider.
+barEmpty.addEventListener('click', function(event) {
+  var per = event.layerX / parseFloat(barEmpty.scrollWidth);
+  player.volume(per);
+});
+sliderBtn.addEventListener('mousedown', function() {
+  window.sliderDown = true;
+});
+sliderBtn.addEventListener('touchstart', function() {
+  window.sliderDown = true;
+});
+volume.addEventListener('mouseup', function() {
+  window.sliderDown = false;
+});
+volume.addEventListener('touchend', function() {
+  window.sliderDown = false;
+});
+
+var move = function(event) {
+  if (window.sliderDown) {
+    var x = event.clientX || event.touches[0].clientX;
+    var startX = window.innerWidth * 0.05;
+    var layerX = x - startX;
+    var per = Math.min(1, Math.max(0, layerX / parseFloat(barEmpty.scrollWidth)));
+    player.volume(per);
+  }
+};
+
+volume.addEventListener('mousemove', move);
+volume.addEventListener('touchmove', move);
+
+// Setup the "waveform" animation.
+var wave = new SiriWave({
+  container: waveform,
+  width: window.innerWidth,
+  height: window.innerHeight * 0.3,
+  cover: true,
+  speed: 0.03,
+  amplitude: 0.7,
+  frequency: 2
+});
+wave.start();
+
+// Update the height of the wave animation.
+// These are basically some hacks to get SiriWave.js to do what we want.
+var resize = function() {
+  var height = window.innerHeight * 0.3;
+  var width = window.innerWidth;
+  wave.height = height;
+  wave.height_2 = height / 2;
+  wave.MAX = wave.height_2 - 4;
+  wave.width = width;
+  wave.width_2 = width / 2;
+  wave.width_4 = width / 4;
+  wave.canvas.height = height;
+  wave.canvas.width = width;
+  wave.container.style.margin = -(height / 2) + 'px auto';
+
+  // Update the position of the slider.
+  var sound = player.playlist[player.index].howl;
+  if (sound) {
+    var vol = sound.volume();
+    var barWidth = (vol * 0.9);
+    sliderBtn.style.left = (window.innerWidth * barWidth + window.innerWidth * 0.05 - 25) + 'px';
+  }
+};
+window.addEventListener('resize', resize);
+resize();