如何编写基于网络的音乐可视化器？

StackOverflow https://stackoverflow.com/questions/3091291

题

我正在尝试找到最佳的方法来构建音乐可视化器，以通过网络在浏览器中运行。 Unity是一个选择，但是我需要构建自定义音频导入/分析插件以获取最终用户的声音输出。石英完成了我需要的工作，但仅在Mac/Safari上运行。 WebGL似乎还没有准备好。拉斐尔（Raphael）主要是2D，仍然存在获取用户声音的问题……有什么想法吗？有人做过吗？

有帮助吗？

解决方案

通过WebGL为“未准备好”，我假设您指的是渗透率（目前仅在WebKit和Firefox中支持）。

除此之外，使用HTML5音频和WebGL绝对可以均衡。一个叫大卫·汉弗莱的人 博客关于制作不同的音乐可视化器 使用WebGL，并能够创建一些非常令人印象深刻的。这是一些可视化的视频（单击观看）：

其他提示

使音频反应性变得非常简单。 这是一个开源网站，有很多音频反应性示例.

至于如何做到这一点，您基本上使用Web音频API来流式传输音乐并使用其AnalySernode获取音频数据。

"use strict";
const ctx = document.querySelector("canvas").getContext("2d");

ctx.fillText("click to start", 100, 75);
ctx.canvas.addEventListener('click', start);  

function start() {
  ctx.canvas.removeEventListener('click', start);
  // make a Web Audio Context
  const context = new AudioContext();
  const analyser = context.createAnalyser();

  // Make a buffer to receive the audio data
  const numPoints = analyser.frequencyBinCount;
  const audioDataArray = new Uint8Array(numPoints);

  function render() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // get the current audio data
    analyser.getByteFrequencyData(audioDataArray);

    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const size = 5;

    // draw a point every size pixels
    for (let x = 0; x < width; x += size) {
      // compute the audio data for this point
      const ndx = x * numPoints / width | 0;
      // get the audio data and make it go from 0 to 1
      const audioValue = audioDataArray[ndx] / 255;
      // draw a rect size by size big
      const y = audioValue * height;
      ctx.fillRect(x, y, size, size);
    }
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  // Make a audio node
  const audio = new Audio();
  audio.loop = true;
  audio.autoplay = true;

  // this line is only needed if the music you are trying to play is on a
  // different server than the page trying to play it.
  // It asks the server for permission to use the music. If the server says "no"
  // then you will not be able to play the music
  // Note if you are using music from the same domain 
  // **YOU MUST REMOVE THIS LINE** or your server must give permission.
  audio.crossOrigin = "anonymous";

  // call `handleCanplay` when it music can be played
  audio.addEventListener('canplay', handleCanplay);
  audio.src = "https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3";
  audio.load();


  function handleCanplay() {
    // connect the audio element to the analyser node and the analyser node
    // to the main Web Audio context
    const source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
  }
}
canvas { border: 1px solid black; display: block; }
<canvas></canvas>

然后，您只能绘制一些创意。

请注意您可能会遇到的一些麻烦。

  1. 此时（2017/1/3）Android Chrome和IOS Safari都不支持分析流音频数据。相反，您必须加载整首歌。 这是一个试图抽象的图书馆

  2. 在移动 您无法自动播放音频。您必须根据用户输入（例如 'click' 或者 'touchstart'.

  3. 如示例中指出的那样，您只能分析音频，如果源来自同一域或您征得CORS许可并授予服务器的权限。 Afaik Only SoundCloud允许允许，并且是每首歌。无论是否允许音频分析用于特定歌曲，这取决于单个艺术家的歌曲的设置。

    试图解释这部分

    默认值是您有权从同一域中访问所有数据，但没有其他域的许可。

    当您添加时 

    audio.crossOrigin = "anonymous";

    基本上说“向服务器征求用户'匿名'的权限”。服务器是否可以授予权限。这取决于服务器。这包括在同一域上询问服务器，这意味着如果您要在同一域中请求一首歌，则需要（a）删除上方的行或（b）配置服务器以授予CORS许可。默认情况下，大多数服务器不给予CORS的权限，因此，如果您添加该行，即使服务器是相同的域，也没有给予CORS许可，则尝试分析音频会失败。

音乐： Vox医生 - 升级

我使用SoundManager2从MP3文件中获取波形数据。该功能需要Flash 9，因此可能不是最好的方法。

我使用HMTL5画布的波形演示：http://www.momentumracer.com/electriccanvas/

和WebGL：http://www.momentumracer.com/electricwebgl/

资料来源：https://github.com/pepez/electric-canvas

根据复杂性，您可能有兴趣尝试处理（http://www.processing.org），它具有制作基于Web的应用程序的非常简单的工具，并且具有获取音频文件的FFT和波形的工具。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top