हम विजुअल लिखने वाले एक उदाहरण पर ऑडियो एपीआई की कोशिश करते हैं

एक स्टॉक बनाएँ

var canva = document.createElement('canvas'); var ctx = canva.getContext('2d'); //      canva.width = window.innerWidth; canva.height = window.innerHeight; //    document.body.appendChild(canvas); 

 var particles = [];//      var createParticles = function () { var particle = null; for (var i = 0; i < 50; i++) { particle = new Particle(); particles.push(particle); } //   -  setInterval(draw,33); } 

 var draw = function () { //     ctx.clearRect(0, 0, canva.width, canva.height); for (var i = 0; i < 50; i++) { var loc = particles[i]; loc.draw(); } } 

 var Particle = function () { this.init(); }; Particle.prototype = { init: function () { this.x = random(canva.width); this.y = random(canva.height); this.level = 1 * random(4); this.speed = random(0.2, 1); this.radius = random(10, 70); //  this.color = random(['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423']); //  this.opacity = random(0.2, 1); this.band = Math.floor(random(128)); }, draw: function () { var pulsar, scale; pulsar = Math.exp(this.pulse); scale = pulsar * this.radius || this.radius; ctx.save(); ctx.beginPath(); //   ctx.arc(this.x, this.y, scale, 0, Math.PI * 2); ctx.fillStyle = this.color; // ctx.globalAlpha = this.opacity / this.level; // ctx.closePath(); ctx.fill(); ctx.strokeStyle = this.color; //  ctx.stroke(); ctx.restore(); this.move(); }, move: function () { this.y -= this.speed * this.level; //         if (this.y < -100) { this.y = canva.height; } } } //   - var random: function( min, max ) { if (this.isArray( min )) { return min[ ~~( Math.random() * min.length ) ]; } if (!this.isNumber(max)) { max = min || 1, min = 0; } return min + Math.random() * ( max - min ); }, //   var isArray: function(object) { return Object.prototype.toString.call( object ) == '[object Array]'; }, //   var isNumber: function(object) { return typeof object == 'number'; } 

एक विश्लेषक बनाएँ

 var AudioContext = w.AudioContext || w.webkitAudioContext; var context = new AudioContext (); 

1. createScriptProcessor (पूर्व में createJavaScriptNode) - यह विधि आपको js का उपयोग करके ऑडियो डेटा एकत्र करने, प्रसंस्करण या विश्लेषण करने के लिए एक इंटरफ़ेस बनाने की अनुमति देती है। इस इंटरफ़ेस का अपना ईवेंट हैंडलर है और हम onaudioprocess ईवेंट में रुचि लेंगे, जो तब होता है जब इनपुट में नया डेटा प्रसारित होता है।
   जब कहा जाता है, तो विधि तीन तर्क लेती है बफरजाइजर - बफर आकार, संख्याइन्फैशनचैनल्स - धारा में इनपुट चैनलों की संख्या, अंकसूत्रचैनल्स - आउटपुट चैनलों की संख्या।
   
2. createMediaElementSource - एक इंटरफ़ेस बनाता है जो एक ऑडियो या वीडियो तत्व से ध्वनि स्रोत का प्रतिनिधित्व करता है। इस पद्धति को कॉल करने के बाद, ऑडियो तत्व से ऑडियो स्ट्रीम ऑडियो कॉन्टेक्स्ट में प्रसंस्करण के लिए पुनर्निर्देशित किया जाएगा।
   
3. createAnalyser - यह विधि आपको डेटा की एक सरणी के रूप में सिग्नल की आवृत्ति और समय मापदंडों के बारे में जानकारी प्राप्त करने की अनुमति देती है। हमें अपने विश्लेषक को ऑडियो सिग्नल के स्रोत और ध्वनि के रिसीवर से कनेक्ट करना होगा।
   

 var Analyze = function () { var AudioContext = w.AudioContext || w.webkitAudioContext; this.context = new AudioContext(); this.node = this.context.createScriptProcessor(2048, 1, 1); this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = 0.3; this.analyser.fftSize = 512; this.bands = new Uint8Array(this.analyser.frequencyBinCount); } 

 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …] 

 var Analyze = function () { var AudioContext = w.AudioContext || w.webkitAudioContext; //  this.audio = new Audio(); this.audio.src = "test1.ogg"; this.controls = true; // - this.context = new AudioContext(); this.node = this.context.createScriptProcessor(2048, 1, 1); //  this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = 0.3; this.analyser.fftSize = 512; this.bands = new Uint8Array(this.analyser.frequencyBinCount); //   this.audio.addEventListener("canplay", function () {}); } 

 var Analyse = function () { var an= this, AudioContext = w.AudioContext || w.webkitAudioContext; //  this.audio = new Audio(); this.audio.src = "test1.ogg"; this.controls = true; // - this.context = new AudioContext(); this.node = this.context.createScriptProcessor(2048, 1, 1); //  this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = 0.3; this.analyser.fftSize = 512; this.bands = new Uint8Array(this.analyser.frequencyBinCount); //   this.audio.addEventListener('canplay', function () { //    AudioContext an.source = an.context.createMediaElementSource(an.audio); //    an.source.connect(an.analyser); //   ,       an.analyser.connect(an.node); //    an.node.connect(an.context.destination); an.source.connect(an.context.destination); //      an.node.onaudioprocess = function () { an.analyser.getByteFrequencyData(an.bands); if (!an.audio.paused) { if (typeof an.update === "function") { return an.update(an.bands); } else { return 0; } } }; }); return this; }; 

 var createParticles = function () { var particle = null, audio = null; for (var i = 0; i < 50; i++) { particle = new Particle(); particles.push(particle); } //  elem = new Analyse(); //  audio   document.body.appendChild(elem.audio); //       audio.update = function (bands) { var ln = 50; while (ln--) { var loc = particles[ln]; loc.pulse = bands[loc.band] / 256; } }; //     setInterval(draw,33); } 

• खेल के लिए चारों ओर ध्वनि
• ध्वनि प्रसंस्करण अनुप्रयोगों
• ऑडियो संश्लेषण

• developer.mozilla.org/en-US/docs/Web/API/AudioContext
• www.html5rocks.com/en/tutorials/webaudio/intro
• creativejs.com/resources/web-audio-api-getting-started
• blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx
• updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs
• css.dzone.com/articles/exploring-html5-web-audio