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

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

4 Solutions collect form web for “Как написать веб-визуализатор музыки?”

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

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

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

Что касается того, как это сделать, вы в основном используете Web Audio API для streamовой передачи музыки и используете свой 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; } 
  

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

Interesting Posts

Почему инструкции x86-64 на 32-разрядных регистрах обнуляют верхнюю часть полного 64-битного регистра?

Какая самая влиятельная книга, которую должен прочитать каждый программист?

Репликация массива по элементам в Matlab

Решение между искусственным первичным ключом и естественным ключом для таблицы Products

Могу ли я служить .html-файлами с помощью Razor, как если бы они были .cshtml-файлами без изменения расширения всех моих страниц?

Потоковое видео с Android-камеры на сервер

Команда перед каждой командой bash

Узнайте, установлен ли на ПК чип TPM?

Как отключить уведомления Outlook?

Как вы поворачиваете двухмерный массив?

пользовательские сообщения об ошибках с формой модели

Как отправить запрос POST и GET?

Запустите JAR-файл из командной строки и укажите путь к classам

Как проверить диалог подтверждения с Cucumber?

C вызовы функции: Понимание правила «неявного int»

Давайте будем гением компьютера.