Làm một cái gì đó phản ứng âm thanh là khá đơn giản. Here's an open source site with lots audio reactive examples.
Về cách thực hiện, bạn về cơ bản sử dụng API âm thanh trên web để phát nhạc và sử dụng AnalyserNode để lấy dữ liệu âm thanh.
"use strict";
// make a Web Audio Context
var context = new AudioContext();
var analyser = context.createAnalyser();
// Make a buffer to receive the audio data
var numPoints = analyser.frequencyBinCount;
var audioDataArray = new Uint8Array(numPoints);
var ctx = document.querySelector("canvas").getContext("2d");
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
var 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>
Sau đó, nó chỉ là tùy thuộc vào bạn để vẽ một cái gì đó sáng tạo.
lưu ý một số sự cố bạn có thể gặp phải.
Tại thời điểm này (2017/1/3) không hỗ trợ Android Chrome và iOS Safari phân tích dữ liệu âm thanh trực tuyến. Thay vào đó, bạn phải tải toàn bộ bài hát. Here'a a library that tries to abstract that a little
Trên thiết bị di động, bạn không thể tự động phát âm thanh. Bạn phải bắt đầu âm thanh bên trong một sự kiện đầu vào dựa trên đầu vào của người dùng như 'click' hoặc 'touchstart'.
Như được chỉ ra trong mẫu, bạn chỉ có thể phân tích âm thanh nếu nguồn là từ cùng một miền HOẶC bạn yêu cầu quyền CORS và máy chủ cho phép. Chỉ AFAIK Soundcloud cho phép và nó trên cơ sở mỗi bài hát. Tùy thuộc vào cài đặt của bài hát của nghệ sĩ riêng lẻ cho dù phân tích âm thanh có được phép cho một bài hát cụ thể hay không.
Để cố gắng giải thích phần này
Mặc định là bạn có quyền truy cập tất cả dữ liệu từ cùng một miền nhưng không được phép từ các miền khác.
Khi bạn thêm
audio.crossOrigin = "anonymous";
Đó cơ bản nói "yêu cầu máy chủ cho phép người dùng ẩn danh". Máy chủ có thể cho phép hay không. Nó thuộc vào máy chủ. Điều này bao gồm yêu cầu ngay cả máy chủ trên cùng một miền có nghĩa là nếu bạn định yêu cầu một bài hát trên cùng một tên miền, bạn cần (a) xóa dòng ở trên hoặc (b) định cấu hình máy chủ của bạn để cấp quyền cho CORS. Hầu hết các máy chủ theo mặc định không cho phép CORS vì vậy nếu bạn thêm dòng đó, ngay cả khi máy chủ là cùng một tên miền, nếu nó không cho phép CORS thì cố gắng phân tích âm thanh sẽ thất bại.
âm nhạc: DOCTOR VOX - Level Up
Cảm ơn - đó là vô cùng hữu ích. :) – nico