堆栈内存溢出
  繁体   English   中英

带有画布的音频可视化器

[英]Audio Visualizer with Canvas

 Eric Wood  2016-12-16 20:12:14  820   1    javascript/ audio/ canvas/ visualizer

问题描述

我正在根据发现的一些不同的Codepen实验来构建音频可视化器。 我是画布的新手，正在尝试弄清楚如何使此运行更平稳。 到目前为止，它运行良好： http ： //codepen.io/ericjacksonwood/pen/bBGEbM

这是可视化器本身的结构： 

function Visualizer() {
  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  analyser.getByteFrequencyData(frequencyData);

  var frequencyWidth = (canvas.width / bufferLength * 4),
    frequencyHeight = 0,
    x = 0;

  for (var increment = 0; increment < bufferLength; increment++) {
    frequencyHeight = frequencyData[increment] * (canvas.height * 0.002);

  canvasContext.fillStyle = "#0000FF";
  canvasContext.fillRect(x, canvas.height - frequencyHeight, frequencyWidth, frequencyHeight);
    x += frequencyWidth + 2;
  }

  call = requestAnimationFrame(Visualizer);
}

但是，我希望这些条在暂停时跌至底部，而不仅仅是让它们完全消失。 这是我要实现的功能的一个更好的示例： http : //codepen.io/ericjacksonwood/pen/xRmXEy

这个例子很好用，但是我不需要彩虹条，所以我觉得大多数JS都可以忽略。

1 条回复

1楼
 bobjoe  2 已采纳  2016-12-16 21:23:27

这些条完全消失，因为您正在停止动画。 只需暂停音频，然后让动画什么都不渲染。 注释掉cancelAnimationFrame(call); 你应该看到你想要的。 我通过注释一行来测试您的代码，并体验了您想要的内容。

问题未解决？试试以下方法：

带有画布的音频可视化器

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Canvas Audio Visualizer 未出现在 Safari 中 使用HTML5 canvas + Web音频API的音频可视化器需要帮助 音频可视化工具C＃ 音频展示台 - ActionScript 到 JavaScript 如何获取Visualizer的音轨 JavaScript中的音频上下文和可视化器问题 如何创建JavaScript Audio Visualizer？ 如何使用 Javascript 编写音频可视化器 JavaScript audio.pause（）和audio.play（）在音频可视化器中不起作用 Webaudio 音频可视化工具，对数刻度 x 轴
相关标签
 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM