html5音乐背景图,HTML5 Audio 麦克风操控+钻石背景图案

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// set up audio context

var audioContext = (window.AudioContext || window.webkitAudioContext);

// create audio class

if (audioContext) {

// Web Audio API is available.

var audioApi = new audioContext();

} else {

// Web Audio API is not available. Ask the user to use a supported browser.

alert("Oh nos! It appears your browser does not support the Web Audio API, please upgrade or use a different browser");

}

// set up getUserMedia

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

// variables

var audioBuffer,

analyserNode,

frequencyData = new Uint8Array(1024);

// create an audio API analyser node and connect to source

function createAnalyserNode(audioSource) {

analyserNode = audioApi.createAnalyser();

analyserNode.fftSize = 2048;

audioSource.connect(analyserNode);

}

// get's html elements, loops over them & attaches a frequency from analysed data - what you do is up to you!

function animateStuff() {

requestAnimationFrame(animateStuff);

analyserNode.getByteFrequencyData(frequencyData);

// Animation stuff--------------------------------

var allRepeatedEls = document.getElementsByTagName('i');

var totalEls = allRepeatedEls.length;

// Simple example of changing opacity & colour -> EDIT THIS!

for (var i = 0; i < totalEls; i++) {

// set colours

var elementColour = i * 10;

allRepeatedEls[i].style.backgroundImage = '-webkit-linear-gradient(left,hsla(' + elementColour + ', 80%, 50%, 0.7),hsla(' + elementColour + ', 80%, 50%, 0.4))';

allRepeatedEls[i].style.borderColor = 'hsla(' + elementColour + ', 80%, 50%, 1)';

// flash on frequency

var freqDataKey = i * 2;

if (frequencyData[freqDataKey] > 160) {

allRepeatedEls[i].style.webkitTransform = "rotate(135deg) scale(1.8)";

} else if (frequencyData[freqDataKey] > 120) {

allRepeatedEls[i].style.webkitTransform = "rotate(105deg) scale(1.5)";

} else if (frequencyData[freqDataKey] > 80) {

allRepeatedEls[i].style.webkitTransform = "rotate(75deg) scale(1.2)";

} else if (frequencyData[freqDataKey] > 40) {

allRepeatedEls[i].style.webkitTransform = "rotate(45deg) scale(1)";

}

}

}

// getUserMedia success callback -> pipe audio stream into audio API

function gotStream(stream) {

// Create an audio input from the stream.

var audioSource = audioApi.createMediaStreamSource(stream);

createAnalyserNode(audioSource);

animateStuff();

}

// pipe in analysing to getUserMedia

navigator.getUserMedia({

audio: true

},

gotStream,

function(err) {

console.log("The following error occured: " + err);

}

);