Objekt nach Klangamplitude animieren?

Ich weiß, dass es möglich ist, ein Objekt mit Sound über Actionscript zu animieren. Ich hoffe wirklich, dass es auch möglich ist, ein Objekt mit JavaScript zu animieren, da sie sich sehr ähnlich sind.Objekt nach Klangamplitude animieren?

Vielleicht könnte es mit jQuery oder HTML5 getan werden. Ich hoffe nur, einen Weg zu finden, es außerhalb des Blitzes zu machen.

Weiß jemand, ob dies in einem dieser Formate möglich ist? Ich habe viel recherchiert und finde keine Formulare oder Tutorials, die sagen, dass es möglich ist oder nicht.

BASICALLY versuche ich, den gleichen Effekt zu erreichen, den ich in Actionscript codierte, aber ich will es mit einer anderen Sprache codieren, so dass keine Flash-Ansichten auch sehen können. Hier

ist das Flash-Beispiel:http://beaubird.com/presentation.php

Hier ist ein Beispiel für Amplitude mit Action Animieren: http://www.developphp.com/view.php?tid=22

Quelle

2012-11-19 Papa De Beau

Was genau meinst du? Das Video, das du gepostet hast, zeigt einen Spieler, der einen Player in Flash erstellt, aber was genau willst du erreichen? (Ein Bild wäre toll.) – corazza

Ich möchte ein Objekt die Amplitude animieren, nämlich einen Schnabel, der sich mit Ton öffnet und schließt. Hier ist ein Beispiel, wie es in Flash funktioniert: http://beaubird.com/presentation.php –

Es ist möglich, mit neuen HTML5-Funktionen, [sehen Sie dies] (http://www.html5rocks.com/ de/tutorials/getusermedia/intro /) –

I an example that changes the radius and color of an svg circle element based on audio amplitude erstellt haben.

Dies funktioniert in WebKit-Browsern, aber sonst nichts. Webkit-Browser sind die einzigen Browser, die der Implementierung der W3C Web Audio API Spec, soweit ich weiß, nahe kommen, aber die scheint darauf hinzuweisen, dass Mozilla diese Spezifikation aufgegeben hat und auch die Web Audio API implementieren wird. Ich bin glücklicherweise nicht bewusst, dass Internet Explorer die Spezifikation implementiert hat (oder nicht).

Leider ist die Antwort im Moment, dass es keine großartige Browser-übergreifende Lösung außer Flash gibt, aber wenn Sie diese Route gehen, sind Sie auf mobilen Geräten geschraubt.

Hier ist die full, working JSBin example.

Und hier ist der Code:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8 /> 
     <title>Drums</title> 
    </head> 
    <body> 
     <svg width="200" height="200"> 
      <circle id="circle" r="10" cx="100" cy="100" /> 
     </svg> 
    </body> 
</html>

Javascript:

var context = new webkitAudioContext(); 

// Here's where most of the work happens 
function processAudio(e) { 
    var buffer = e.inputBuffer.getChannelData(0); 
    var out = e.outputBuffer.getChannelData(0); 
    var amp = 0; 

    // Iterate through buffer to get the max amplitude for this frame 
    for (var i = 0; i < buffer.length; i++) { 
    var loud = Math.abs(buffer[i]); 
    if(loud > amp) { 
     amp = loud; 
    } 
    // write input samples to output unchanged 
    out[i] = buffer[i]; 
    } 

    // set the svg circle's radius according to the audio's amplitude 
    circle.setAttribute('r',20 + (amp * 15)); 

    // set the circle's color according to the audio's amplitude 
    var color = Math.round(amp * 255); 
    color = 'rgb(' + color + ',' + 0 + ',' + color + ')'; 
    circle.setAttribute('fill',color); 
} 

window.addEventListener('load',function() { 
    var circle = document.getElementById('circle'); 

    // Add an audio element 
    var audio = new Audio(); 
    audio.src = 'http://www.mhat.com/phatdrumloops/audio/acm/mole_on_the_dole.wav'; 
    audio.controls = true; 
    audio.preload = true; 
    document.body.appendChild(audio); 


    audio.addEventListener('canplaythrough',function() { 
    var node = context.createMediaElementSource(audio); 

    // create a node that will handle the animation, but won't alter the audio 
    // in any way   
    var processor = context.createJavaScriptNode(2048,1,1); 
    processor.onaudioprocess = processAudio; 

    // connect the audio element to the node responsible for the animation 
    node.connect(processor); 

    // connect the "animation" node to the output 
    processor.connect(context.destination); 

    // play the sound 
    audio.play(); 
    }); 
});

Quelle

2012-11-20 05:44:22

Ich denke, dass die Audio-Daten-API wurde von W3C abgelehnt und ist nicht mehr in der Entwicklung. Mozilla implementiert jetzt auch Web Audio. –

Danke für die Information @OskarEriksson. Ich habe meine Antwort bearbeitet, um das deutlicher zu machen. –

+1 Oskar. Hatte nicht gehört, aber später gefunden https://wiki.mozilla.org/Web_Audio_API – MikeSmithDev

einen Javascript-Knoten Amplitude zu bewerten Verwendung funktionieren wird, aber weniger als ideal aus Leistungsgründen. Ich würde empfehlen, einen RealtimeAnalyser für einen requestAnimationFrame-Timer zu verwenden. Sie können mit dem Code von http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs beginnen, verwenden Sie einfach eine kleinere fftSize (128) und RMS die Werte.

Quelle

2012-11-20 20:16:02 cwilso

Cool! +1, um mich über 'requestAnimationFrame' zu unterrichten. –

KievII-Bibliothek (http://kievii.net) ist für Audio-Anwendungen ausgerichtet. Vielleicht können Sie dort etwas Nützliches finden (zum Beispiel können Sie ein Wavebox-Objekt oder eine Reihe von ClickBar-Objekten animieren). Schauen Sie sich die Beispiele dort an: http://kievII.net/examples.html

Quelle

2012-11-26 19:32:56 janesconference

Objekt nach Klangamplitude animieren?

Antwort

Verwandte Themen