我正在尝试找到构建音乐可视化工具以在网络浏览器中运行的最佳方法。 Unity 是一个选项，但我需要构建一个自定义音频导入/分析插件来获取最终用户的声音输出。 Quartz 可以满足我的需要，但只能在 Mac/Safari 上运行。 WebGL 似乎还没有准备好。 Raphael 主要是 2D，并且仍然存在获取用户声音的问题......有什么想法吗？以前有人这样做过吗？
让音频响应起来非常简单。这是一个开源网站，其中有很多音频反应示例 https://www.vertexshaderart.com.
至于如何做到这一点，您基本上使用 Web Audio 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>
然后就由你来画一些有创意的东西了。
请注意您可能会遇到的一些麻烦。
目前（2017/1/3）Android Chrome 和 iOS Safari 均不支持分析流式音频数据。相反，您必须加载整首歌曲。这是一个试图抽象一点的库 https://github.com/greggman/audiostreamsource.js
On Mobile you can not automatically play audio. You must start the audio inside an input event based on user input like 'click' or 'touchstart'.
-
正如示例中所指出的，只有当源来自同一域或者您请求 CORS 权限并且服务器授予权限时，您才能分析音频。据我所知，只有 Soundcloud 给予许可，并且是按每首歌为基础的。是否允许对特定歌曲进行音频分析取决于各个艺术家的歌曲设置。
尝试解释这部分
默认情况下，您有权访问同一域的所有数据，但没有其他域的权限。
当你添加
audio.crossOrigin = "anonymous";
这基本上就是“向服务器请求用户‘匿名’的许可”。服务器可以授予权限，也可以不授予权限。这取决于服务器。这包括询问同一域上的服务器，这意味着如果您要请求同一域上的歌曲，您需要 (a) 删除上面的行或 (b) 配置您的服务器以授予 CORS 权限。默认情况下，大多数服务器不授予 CORS 权限，因此如果添加该行，即使服务器是同一域，如果它不授予 CORS 权限，则尝试分析音频将失败。
music: VOX 博士 - 升级 http://youtu.be/eUX39M_0MJ8
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
