Сделать что-то аудиореактивное довольно просто. Вот сайт с открытым исходным кодом с множеством аудиореактивных примеров. .
Что касается того, как это сделать, вы в основном используете 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>
Тогда вам нужно нарисовать что-то творческое.
обратите внимание на некоторые проблемы, с которыми вы, вероятно, столкнетесь.
На данный момент (2017/1/3) ни Android Chrome, ни iOS Safari не поддерживают анализ потоковых аудиоданных.Вместо этого вы должны загрузить всю песню. Вот библиотека, которая пытается немного абстрагироваться
На мобильном вы не можете автоматически воспроизводить аудио.Вы должны запустить звук внутри входного события на основе пользовательского ввода, например 'click' или 'touchstart'.
Как указано в примере, вы можете анализировать звук только в том случае, если источником является либоиз того же домена ИЛИ вы запрашиваете разрешение CORS, а сервер дает разрешение.AFAIK только Soundcloud дает разрешение, и это на основе каждой песни.В зависимости от настроек песни отдельного исполнителя, разрешен ли аудиоанализ для конкретной песни.
Чтобы попытаться объяснить эту часть
По умолчанию у вас есть разрешение на доступ ко всем данным изтот же домен, но нет разрешения от других доменов.
Когда вы добавляете
audio.crossOrigin = "anonymous";
Это в основном говорит "запросить у сервера разрешение для пользователя" анонимный "".Сервер может дать разрешение или нет.Это зависит от сервера.Это включает в себя запрос даже сервера в том же домене, что означает, что если вы собираетесь запрашивать песню в том же домене, вам нужно либо (а) удалить строку выше, либо (б) настроить свой сервер для предоставления разрешения CORS.Большинство серверов по умолчанию не дают разрешения CORS, поэтому, если вы добавите эту строку, даже если сервер находится в том же домене, если он не дает разрешения CORS, попытка анализа звука завершится неудачей.
музыка: DOCTOR VOX - повышение уровня