繁体   English   中英

带有画布的音频可视化器

Audio Visualizer with Canvas

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在根据发现的一些不同的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 个回复

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

1 Canvas Audio Visualizer 未出现在 Safari 中

我正在使用 Canvas 为网站创建音频可视化工具,但它没有出现在 Safari 中。 我认为加载音频可能是一个问题,因为在音频加载之前,可视化工具不会显示。 这是我用来加载音频的内容: 如果我导航到音频 URL,它加载得很好(而且相当快)。 我创建了一个在 Chrome 和 Firefox ...

2 音频展示台

我创建了一个音频可视化器,并想以渐变方式可视化音频,但无法做到。 看起来您的帖子主要是代码; 请添加更多详细信息。 看起来您的帖子主要是代码; 请添加更多详细信息。 var body, num, array, width, context, logo, myElements, a ...

4 快速音频波形可视化器

我正在尝试制作一个程序来显示音频波形 。 问题是音频有很多样本 ,而绘制每个样本会导致我要寻找的东西会花费太多时间。 这张大胆的照片基本上就是我想要的... 我可以以某种方式预先计算波形,但是我仍然需要能够放大和缩小 ... 是否有方法(可能需要您预先计算),以便能够 ...

5 iOS 中的音频条可视化工具

我正在寻找一种在 iOS 中创建与此类似的音频条可视化工具的方法。 每个白条都会根据音频波形上下移动。 我真的很迷茫,因为在 Objective-c 中处理音频的经验不多。 编辑:我正在寻找的是Overcast 的应用程序在其可视化器上所做的事情(播客图像下部的一组垂直橙色条) 任何人都可 ...

6 Java中音频文件的可视化器

我正在用Java开发一个简单的媒体播放器。 我想添加一些可视化工具,但似乎无法在线找到任何帮助。 你们有没有用Java做过可视化工具? 否则,将非常感谢您与任何参考资料的链接。 谢谢。 ...

7 VLCJ音频可视化器输出

我正在使用VLCJ创建一个播放视频的程序。 我想在我的视频画布后面的播放面板中显示音频可视化。 我将此参数作为--audio-visual=visual添加到EmbeddedMediaPlayer中。 运行程序后,音频可视化效果显示在主播放上下文(画布)上,而视频播放器显示在新框架中。 ...

8 音频可视化工具C#

我正在C#/ Asp.net / JavaScript(作为网站)中编写音频可视化工具。 由于我的动画应随音乐一起平稳移动,因此我认为在后面的代码中预处理MP3,将值/频率写入文本文件或其他内容,然后使用javascript读取值并相应地修改动画会更有意义。 。 基本上我想做类似这样的酒吧事 ...

9 音频可视化器帮助

我是该网站的新手,并且几乎对任何类型的编程都是如此。 最近我正在尝试学习C ++(游戏编程),我父亲希望我让他成为一个基于Web的应用程序,无论是否有声音播放(我认为这被称为音频可视化),该窗口都会闪烁。 ,他说我应该用C ++或Java做一个外部应用程序。 他借给我一本有关QT的GUI的书 ...

10 WebRTC的音频可视化器

我试图用www.rtcmulticonnection.org,spefically: http://www.rtcmulticonnection.org/docs/onstream/ 我希望能够获取视频元素并将其连接到频率分析仪。 我已经尝试过$(“ video”)。get(0).c ...

暂无
暂无

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

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM