本文主要是介绍html5音乐频谱，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
http://www.imooc.com/video/5972
请在这里查看示例 ☞ audioShow示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/><script src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js"></script><title>audioShow</title><style>* {margin: 0; padding: 0;font-size: 0.04rem;}body, html {width: 100%;height: 100%;}canvas {}</style>
</head>
<body><p>father.mp3</p><p>year.mp3</p><input type="text"><canvas width="400" height="300"></canvas>
<script>;$(function() {var xhr = new XMLHttpRequest();var ac = new (window.AudioContext || window.webkitAudioContext)();var gainNode = ac[ac.createGain?'createGain':'createGainNode']();gainNode.connect(ac.destination);var analyser = ac.createAnalyser();var num = 256;analyser.fftSize = num * 2;analyser.connect(gainNode);var source = null;var count = 0;//点击播放音乐$('p').on('click', function() {var n = ++count;source && source[source.stop?'stop':'noteOff']();//先停止上一首xhr.abort();xhr.open('get', this.innerText);xhr.responseType = 'arraybuffer';//关键点xhr.onload = function() {if(n != count) return;//播放音乐ac.decodeAudioData(xhr.response, function(buffer) {if(n != count) return;var bufferSource = ac.createBufferSource();bufferSource.buffer = buffer;bufferSource.connect(analyser);bufferSource[bufferSource.start?'start':'noteOn'](0);source = bufferSource;});}xhr.send();});var size = [700, 300];//canvas尺寸$('canvas').attr({'width': size[0],'height': size[1],});var cav = $('canvas')[0].getContext('2d');//可视化var arr = new Uint8Array(analyser.frequencyBinCount);(function getData() {requestAnimationFrame(getData);analyser.getByteFrequencyData(arr);cav.clearRect(0, 0, size[0], size[1]);for(var i=0; i<num; i++) {cav.fillRect(i, size[1]-arr[i], 5, arr[i]);}})();//改变音量$(':text').on('input', function() {gainNode.gain.value = this.value;});});
</script>
</body>
</html>这篇关于html5音乐频谱的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
