【html本地工具】html+css+js本地音乐播放器，实现可视化音频频谱

以下是一个简单的HTML本地音乐播放器示例，使用了HTML、CSS和JavaScript，并结合了audio元素和Web Audio API来实现可视化音频频谱。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Music Player with Audio Visualizer</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
  }
  audio {
    width: 400px;
    margin: 20px;
  }
  canvas {
    width: 400px;
    height: 200px;
  }
</style>
</head>
<body>
<audio id="audio" controls preload="auto" crossOrigin="anonymous">
  Your browser does not support the audio element.
</audio>
<canvas id="visualizer"></canvas>
 
<script>
  const audio = document.getElementById('audio');
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  const audioSrc = 'path_to_your_audio_file.mp3'; // 替换为你的音频文件路径
 
  audio.addEventListener('loadedmetadata', function() {
    canvas.width = audio.clientWidth;
    canvas.height = audio.clientHeight;
  });
 
  audio.src = audioSrc;
 
  // 音频可视化函数
  function visualize() {
    const array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const barWidth = (canvas.width / array.length) * 2.5;
    let barHeight;
    for (let i = 0; i < array.length; i++) {
      barHeight = array[i] / 2;
      const r = barHeight + 25 * (i / array.length);
      const g = 250 * (i / array.length);
      const b = 250 * (i / array.length);
      ctx.fillStyle = `rgb(${r},${g},${b})`;
      ctx.fillRect(i * barWidth, canvas.height, barWidth, -barHeight);
    }
    requestAnimationFrame(visualize);
  }
 
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioCtx.createMediaElementSource(audio);
  const analyser = audioCtx.createAnalyser();
 
  source.connect(analyser);
  analyser.connect(audioCtx.destination);
  audio.play();
 
  visualize();
</script>
</body>
</html>

在这个示例中，我们首先定义了一个简单的HTML结构，其中包括一个audio元素和一个canvas元素。然后，我们使用CSS为页面设置了基本的样式。接下来，我们在JavaScript部分创建了一个音频上下文，并将其与audio元素的源连接起来。我们还设置了一个analyser节点，这是Web Audio API中用于分析音频频谱数据的关键组件。

然后，我们定义了一个visualize函数，这个函数会在每个动画帧被调用，它使用analyser节点获取频率数据，并将这些数据绘制到canvas上，创建一个视觉表现形式的音频频谱。

【html本地工具】html+css+js本地音乐播放器，实现可视化音频频谱

评论已关闭

推荐阅读