WebベースのMusic Visualizerを書く方法は？

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

質問

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

役に立ちましたか？

解決

Webglが「準備ができていない」ことによって、私はあなたが浸透に言及していると仮定しています（現時点ではWebKitとFirefoxでのみサポートされています）。

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

他のヒント

オーディオリアクティブなものを作るのは非常に簡単です。 これが多くのオーディオリアクティブな例を備えたオープンソースサイトです.

それを行う方法については、基本的にWeb Audio APIを使用して音楽をストリーミングし、その分析を使用してオーディオデータを取得します。

"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のみSoundCloudが許可を与え、それは1曲ごとにあります。特定の曲でオーディオ分析が許可されているかどうかにかかわらず、個々のアーティストの曲の設定次第です。

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

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

    追加するとき 

    audio.crossOrigin = "anonymous";

    それは基本的に「ユーザー「匿名」の許可をサーバーに尋ねる」と書かれています。サーバーは許可を与えるかどうかを与えることができます。サーバー次第です。これには、同じドメイン上のサーバーでさえ尋ねることが含まれます。つまり、同じドメインで曲をリクエストする場合は、（a）上の行を削除するか、（b）CORSの許可を与えるためにサーバーを構成する必要があります。ほとんどのサーバーはデフォルトでCORSの許可を与えないため、サーバーが同じドメインであっても、そのラインを追加すると、CORSの許可が与えられない場合、オーディオを分析しようとすると失敗します。

音楽： ドクター・ボックス - レベルアップ

soundmanager2を使用して、mp3ファイルから波形データをプルしました。その機能にはフラッシュ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