Как написать веб-визуализатор на основе веб-сайта?

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

Вопрос

Я пытаюсь найти лучший подход для создания музыкального визуализатора для запуска в браузере через Интернет. Unity - это вариант, но мне нужно будет создать пользовательский плагин для импорта/анализа звука, чтобы получить звуковой выход конечного пользователя. Кварц делает то, что мне нужно, но работает только на Mac/Safari. Webgl кажется не готовым. Рафаэль в основном 2D, и все еще есть проблема получения звука пользователя ... есть идеи? Кто-нибудь делал это раньше?

Это было полезно?

Решение

By WebGL «не готов», я предполагаю, что вы относитесь к проникновению (он поддерживается только в WebKit и Firefox в данный момент).

Кроме того, эквалайзеры определенно возможны с использованием HTML5 Audio и WebGL. Парень по имени Дэвид Хамфри имеет Блог о разных музыкальных визуализаторах Использование WebGL и смог создать некоторые действительно впечатляющие. Вот несколько видео визуализаций (нажмите, чтобы посмотреть):

Другие советы

Делать что-то звуковое реагирование довольно просто. Вот сайт с открытым исходным кодом с множеством аудио реагирования.

Что касается того, как это сделать, вы в основном используете API Web Audio для потоковой передачи музыки и использования его 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 Support, анализируя потоковые аудиоданные. Вместо этого вы должны загрузить всю песню. Здесь библиотека, которая пытается аннотация, что немного

  2. На мобильном телефоне Вы не можете автоматически воспроизводить аудио. Вы должны запустить звук внутри входного события на основе ввода пользователя, например 'click' или 'touchstart'.

  3. Как указано в примере, вы можете проанализировать аудио, только если источник находится либо из того же домена, либо вы просите разрешения CORS, и сервер дает разрешение. AFAIK Only SoundCloud дает разрешение, и это на основе песни. Это зависит от настройки песни отдельного исполнителя, разрешено ли аудио -анализ для конкретной песни.

    Чтобы попытаться объяснить эту часть

    У по умолчанию у вас есть разрешение на доступ к всем данным из того же домена, но нет разрешения от других доменов.

    Когда вы добавляете 

    audio.crossOrigin = "anonymous";

    Что в основном говорит: «Спросите сервер для разрешения пользователя Anonymous '». Сервер может дать разрешение или нет. Это зависит от сервера. Это включает в себя задание даже сервера в том же домене, что означает, что если вы собираетесь запросить песню в том же домене, вам нужно либо (а) Удалить строку выше или (b) Настроить свой сервер, чтобы дать разрешение CORS. Большинство серверов по умолчанию не дают разрешения CORS, поэтому, если вы добавите эту строку, даже если сервер является тем же доменом, если оно не дает разрешения CORS, то попытается проанализировать аудио.

Музыка: Доктор Вокс - Уровень вверх

Я использовал 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), у нее есть действительно простые инструменты для создания веб-приложений, и у него есть инструменты для получения FFT и формы волны аудиофайла.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top