6

Web 上のブラウザーで実行する音楽ビジュアライザーを構築するための最良の方法を見つけようとしています。Unity はオプションですが、エンド ユーザーのサウンド出力を取得するには、カスタムのオーディオ インポート/分析プラグインを作成する必要があります。Quartz は私が必要としている機能を備えていますが、Mac/Safari でしか動作しません。WebGL の準備が整っていないようです。Raphael は主に 2D であり、ユーザーのサウンドを取得するという問題がまだあります... 何かアイデアはありますか? 誰もこれを以前にやったことがありますか？

4

4 に答える 4

7

何かをオーディオに反応させるのはとても簡単です。オーディオ リアクティブの例がたくさんあるオープン ソース サイトを次に示します。

その方法については、基本的に 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>

その後、創造的なものを描くのはあなた次第です。

遭遇する可能性のあるいくつかの問題に注意してください。

  1. 現時点 (2017/1/3) では、Android Chrome も iOS Safari もストリーミング オーディオ データの解析をサポートしていません。代わりに、曲全体をロードする必要があります。これを少し抽象化しようとするライブラリがあります

  2. モバイルでは、オーディオを自動的に再生することはできません。'click'または などのユーザー入力に基づいて、入力イベント内でオーディオを開始する必要があります'touchstart'。

  3. サンプルで指摘されているように、ソースが同じドメインからのものであるか、CORS パーミッションを要求し、サーバーがパーミッションを与える場合にのみ、オーディオを分析できます。私の知る限り、Soundcloudのみが許可を与えており、それは曲ごとです. 特定の曲に対してオーディオ分析を許可するかどうかは、個々のアーティストの曲の設定次第です。

    この部分を説明しようとすると

    デフォルトでは、同じドメインのすべてのデータにアクセスする権限がありますが、他のドメインからの権限はありません。

    追加すると

    audio.crossOrigin = "anonymous";

    それは基本的に「ユーザー「匿名」の許可をサーバーに求める」ことを意味します。サーバーは許可を与えるかどうかを指定できます。サーバー次第です。これには、同じドメインのサーバーに依頼することも含まれます。つまり、同じドメインの曲をリクエストする場合は、(a) 上記の行を削除するか、(b) CORS 許可を与えるようにサーバーを構成する必要があります。ほとんどのサーバーはデフォルトで CORS 許可を与えていないため、その行を追加すると、サーバーが同じドメインであっても、CORS 許可を与えていないと音声の分析に失敗します。

音楽: DOCTOR VOX - レベルアップ

于 2017-01-03T12:25:21.633 に答える
5

WebGLが「準備ができていない」ということは、ペネトレーションについて言及していると思います（現時点では、WebKitとFirefoxでのみサポートされています）。

それ以外は、HTML5オーディオとWebGLを使用してイコライザーを使用することは間違いなく可能です。David Humphreyという男が、WebGLを使用してさまざまな音楽ビジュアライザーを作成することについてブログを書き、いくつかの本当に印象的なものを作成することができました。これが視覚化のビデオです（クリックして見る）：

于 2010-06-24T07:00:26.347 に答える
2

SoundManager2を使用して、mp3ファイルから波形データを取得しました。この機能にはFlash9が必要なため、最善のアプローチではない可能性があります。

HMTL5 Canvasを使用した波形デモ： http ：//www.momentumracer.com/electriccanvas/

およびWebGL： http ://www.momentumracer.com/electricwebgl/

出典： https ：//github.com/pepez/Electric-Canvas

于 2011-04-11T11:18:22.683 に答える
1

複雑さに応じて、Processing (http://www.processing.org) を試してみたいと思うかもしれません。Web ベースのアプリを作成するための非常に簡単なツールがあり、オーディオ ファイルの FFT と波形を取得するためのツールがあります。

于 2010-10-15T18:22:03.447 に答える