使用javascript读取波形文件数据,并生成动态的波形图

代码如下:

javascript 复制代码
// HTML5 Canvas 动态波形生成器
// 使用JS读取波形文件并生成动态波形

// 创建Canvas并设置上下文
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 400;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 波形数据
let waveform = [];

// 加载波形文件数据
async function loadWaveformData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const arrayBuffer = await response.arrayBuffer();
    const audioContext = new AudioContext();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    waveform = audioBuffer.getChannelData(0); // 获取左声道数据
    console.log('Waveform data loaded:', waveform);
    drawWaveform();
  } catch (error) {
    console.error('Error loading waveform data:', error);
  }
}

// 动态波形绘制参数
const waveParams = {
  sampleRate: 800, // 每帧波形的采样点数
  offset: 0, // 动态偏移
  speed: 2 // 波形滚动速度
};

// 动态绘制波形
function drawWaveform() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  const step = Math.max(1, Math.floor(waveform.length / waveParams.sampleRate)); // 每步采样间隔
  const centerY = canvas.height / 2;

  for (let i = 0; i < canvas.width; i++) {
    const sampleIndex = (waveParams.offset + i * step) % waveform.length;
    const sampleValue = waveform[Math.floor(sampleIndex)];
    const y = centerY + sampleValue * centerY; // 将样本值映射到画布高度
    if (i === 0) {
      ctx.moveTo(i, y);
    } else {
      ctx.lineTo(i, y);
    }
  }

  ctx.strokeStyle = '#007BFF';
  ctx.lineWidth = 2;
  ctx.stroke();

  waveParams.offset += waveParams.speed; // 波形滚动

  requestAnimationFrame(drawWaveform);
}

// 加载波形文件(将 `example.wav` 替换为你的文件路径)
loadWaveformData('example.wav');
相关推荐
Amy.Wang几秒前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼3 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再7 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55511 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter19 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录22 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
m0_6873998430 分钟前
写一个Ununtu C++ 程序,调用ffmpeg API, 来判断一个数字电影的视频文件mxf 是不是Jpeg2000?
开发语言·c++·ffmpeg
爱上语文40 分钟前
Redis基础(5):Redis的Java客户端
java·开发语言·数据库·redis·后端
A~taoker1 小时前
taoker的项目维护(ng服务器)
java·开发语言