Spaces:

Ivan000
/

Lofi-Radio

Running

App Files Files Community

Ivan000 commited on Feb 11, 2025

Commit

27630e2

verified ·

1 Parent(s): 37f1aec

Upload 5 files

Browse files

Files changed (5) hide show

audioPlayer.js +38 -0
index.html +34 -0
main.js +53 -0
styles.css +158 -0
visualizer.js +104 -0

audioPlayer.js ADDED Viewed

	@@ -0,0 +1,38 @@

+export class AudioPlayer {
+  constructor(audioContext, url) {
+    this.audioContext = audioContext;
+    this.audio = new Audio();
+    this.audio.crossOrigin = 'anonymous';
+    this.audio.src = url;
+    this.gainNode = this.audioContext.createGain();
+    this.analyser = this.audioContext.createAnalyser();
+    this.source = this.audioContext.createMediaElementSource(this.audio);
+    this.source.connect(this.analyser);
+    this.analyser.connect(this.gainNode);
+    this.gainNode.connect(this.audioContext.destination);
+    this.isPlaying = false;
+    // Set fixed volume
+    this.gainNode.gain.value = 0.5;
+  }
+  play() {
+    this.audioContext.resume();
+    this.audio.play();
+    this.isPlaying = true;
+  }
+  pause() {
+    this.audio.pause();
+    this.isPlaying = false;
+  }
+  connectAnalyser(analyser) {
+    this.source.disconnect(this.analyser);
+    this.source.connect(analyser);
+    analyser.connect(this.gainNode);
+  }
+}

index.html ADDED Viewed

	@@ -0,0 +1,34 @@

+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lofi Radio Player</title>
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+  <div class="player-container">
+    <div class="player-card">
+      <div class="visualizer-container">
+        <canvas id="visualizer"></canvas>
+      </div>
+      <div class="controls">
+        <div class="play-button" id="playButton">
+          <svg class="play-icon" viewBox="0 0 24 24">
+            <path d="M8 5v14l11-7z"/>
+          </svg>
+          <svg class="pause-icon" viewBox="0 0 24 24">
+            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+          </svg>
+        </div>
+      </div>
+      <div class="track-info">
+        <span class="station-name">Lofi Radio</span>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="js/main.js"></script>
+</body>
+</html>

main.js ADDED Viewed

	@@ -0,0 +1,53 @@

+import { AudioPlayer } from './audioPlayer.js';
+import { Visualizer } from './visualizer.js';
+const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+const audioPlayer = new AudioPlayer(audioContext, 'http://stream-174.zeno.fm/c58ssug3668uv?zt=eyJhbGciOiJIUzI1NiJ9.eyJzdHJlYW0iOiJjNThzc3VnMzY2OHV2IiwiaG9zdCI6InN0cmVhbS0xNzQuemVuby5mbSIsInJ0dGwiOjUsImp0aSI6IjY0U1pWa1RFVGJ5aS16VVJjZUE0c2ciLCJpYXQiOjE3MzkyNzc4NzQsImV4cCI6MTczOTI3NzkzNH0.fOQetCgM5m28EmqCIxLYh0hkPzetEDO8ixqTH0cNOw0');
+const visualizer = new Visualizer(audioContext, 'visualizer');
+audioPlayer.connectAnalyser(visualizer.analyser);
+const playButton = document.getElementById('playButton');
+const playIcon = playButton.querySelector('.play-icon');
+const pauseIcon = playButton.querySelector('.pause-icon');
+playButton.addEventListener('click', () => {
+  if (audioPlayer.isPlaying) {
+    audioPlayer.pause();
+    playIcon.style.display = 'block';
+    pauseIcon.style.display = 'none';
+  } else {
+    audioPlayer.play();
+    playIcon.style.display = 'none';
+    pauseIcon.style.display = 'block';
+  }
+});
+function lerp(start, end, amt) {
+  return (1 - amt) * start + amt * end;
+}
+function updateBackgroundColor(amplitude) {
+  // Convert hex colors to RGB
+  const startColor = {
+    r: 0x1f, g: 0x03, b: 0x6b
+  };
+  const endColor = {
+    r: 0x6a, g: 0x4a, b: 0xc2
+  };
+  // Interpolate between colors based on amplitude
+  const r = Math.round(lerp(startColor.r, endColor.r, amplitude));
+  const g = Math.round(lerp(startColor.g, endColor.g, amplitude));
+  const b = Math.round(lerp(startColor.b, endColor.b, amplitude));
+  document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+}
+function animate() {
+  const amplitude = visualizer.draw();
+  updateBackgroundColor(amplitude);
+  requestAnimationFrame(animate);
+}
+animate();

styles.css ADDED Viewed

	@@ -0,0 +1,158 @@

+/* Global Styles */
+:root {
+  --primary-bg: #1f036b;
+  --card-bg: rgba(37, 41, 66, 0.3);
+  --accent-color: rgba(108, 99, 255, 0.8);
+  --text-color: rgba(255, 255, 255, 0.9);
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-highlight: rgba(255, 255, 255, 0.07);
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: var(--primary-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  color: var(--text-color);
+  transition: background-color 0.3s ease;
+}
+.player-container {
+  width: 100%;
+  max-width: 400px;
+  padding: 20px;
+}
+.player-card {
+  background: var(--card-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 30px;
+  padding: 25px;
+  box-shadow:
+    0 10px 30px var(--shadow-color),
+    inset 0 1px 1px var(--glass-highlight),
+    0 0 0 1px var(--glass-border);
+  position: relative;
+  overflow: hidden;
+}
+.player-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -50%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--glass-highlight),
+    transparent
+  );
+  transform: skewX(-15deg);
+  pointer-events: none;
+}
+.visualizer-container {
+  width: 100%;
+  height: 200px;
+  margin-bottom: 25px;
+  border-radius: 20px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.15);
+  box-shadow:
+    inset 0 2px 5px rgba(0, 0, 0, 0.2),
+    0 0 0 1px var(--glass-border);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+canvas {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+  position: relative;
+  z-index: 1;
+}
+.play-button {
+  width: 65px;
+  height: 65px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow:
+    0 5px 15px rgba(108, 99, 255, 0.3),
+    inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(108, 99, 255, 0.4);
+}
+.play-button:hover {
+  transform: scale(1.05);
+  background: rgba(108, 99, 255, 0.9);
+  box-shadow:
+    0 8px 20px rgba(108, 99, 255, 0.4),
+    inset 0 1px 1px rgba(255, 255, 255, 0.3);
+}
+.play-button:active {
+  transform: scale(0.98);
+}
+.play-button svg {
+  width: 30px;
+  height: 30px;
+  fill: var(--text-color);
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
+}
+.pause-icon {
+  display: none;
+}
+.track-info {
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+.station-name {
+  font-size: 1.2em;
+  font-weight: 600;
+  display: block;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  letter-spacing: 0.5px;
+  background: linear-gradient(to bottom,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.8)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

visualizer.js ADDED Viewed

	@@ -0,0 +1,104 @@

+export class Visualizer {
+  constructor(audioContext, canvasId) {
+    this.canvas = document.getElementById(canvasId);
+    this.ctx = this.canvas.getContext('2d');
+    this.analyser = audioContext.createAnalyser();
+    // Ensure fftSize is a valid power of two (16384 is the max standard value)
+    this.analyser.fftSize = 16384;
+    this.bufferLength = this.analyser.frequencyBinCount;
+    this.dataArray = new Uint8Array(this.bufferLength);
+    this.sampleRate = audioContext.sampleRate;
+    this.binWidth = this.sampleRate / this.analyser.fftSize;
+    // Adjusted frequency range
+    this.startBin = Math.floor(20 / this.binWidth);
+    this.endBin = Math.floor(200 / this.binWidth);
+    this.usableBins = this.endBin - this.startBin;
+    // Slightly reduced smoothing for faster response
+    this.analyser.smoothingTimeConstant = 0.45; // Reduced from 0.5
+    // Peak tracking with slightly more dynamic range
+    this.peakLevels = new Array(this.usableBins).fill(0);
+    this.peakDecayRate = 0.85; // Slightly faster decay
+    this.dynamicPeakMultiplier = 1.25; // Increased from 1.2
+    this.resize();
+    window.addEventListener('resize', () => this.resize());
+  }
+  resize() {
+    const dpr = window.devicePixelRatio || 1;
+    this.canvas.width = this.canvas.offsetWidth * dpr;
+    this.canvas.height = this.canvas.offsetHeight * dpr;
+    this.ctx.scale(dpr, dpr);
+    this.canvas.style.width = this.canvas.offsetWidth + 'px';
+    this.canvas.style.height = this.canvas.offsetHeight + 'px';
+  }
+  getAverageAmplitude() {
+    let sum = 0;
+    for (let i = this.startBin; i < this.endBin; i++) {
+      sum += this.dataArray[i];
+    }
+    // Slightly increased sensitivity
+    return Math.min((sum / this.usableBins / 255) * 0.75, 1);
+  }
+  draw() {
+    this.analyser.getByteFrequencyData(this.dataArray);
+    const width = this.canvas.offsetWidth;
+    const height = this.canvas.offsetHeight;
+    // Slightly more transparent fade effect with a color closer to the background
+    this.ctx.fillStyle = 'rgba(31, 3, 107, 0.3)';
+    this.ctx.fillRect(0, 0, width, height);
+    const barWidth = (width / this.usableBins) * 0.9;
+    const spacing = barWidth * 0.1;
+    let x = (width - (this.usableBins * (barWidth + spacing))) / 2;
+    for (let i = this.startBin; i < this.endBin; i++) {
+      const index = i - this.startBin;
+      const currentValue = this.dataArray[i];
+      // More controlled peak tracking
+      this.peakLevels[index] = Math.max(
+        currentValue,
+        Math.min(
+          this.peakLevels[index] * this.peakDecayRate,
+          currentValue * this.dynamicPeakMultiplier
+        )
+      );
+      // Slightly reduced peak height scaling
+      const barHeight = Math.min(
+        (this.peakLevels[index] * 0.9) * (height / 255),
+        height
+      );
+      const gradient = this.ctx.createLinearGradient(0, height, 0, height - barHeight);
+      gradient.addColorStop(0, 'rgba(106, 74, 194, 0.8)');  // Matching the end color of background
+      gradient.addColorStop(1, 'rgba(31, 3, 107, 0.4)');    // Matching the start color of background
+      this.ctx.fillStyle = gradient;
+      this.ctx.beginPath();
+      this.ctx.roundRect(
+        x,
+        height - barHeight,
+        barWidth,
+        barHeight,
+        3
+      );
+      this.ctx.fill();
+      x += barWidth + spacing;
+    }
+    return this.getAverageAmplitude();
+  }
+}