1. Dom
  2. Pytanie i odpowiedź
  3. Animować obiekt za pomocą amplitudy dźwięku?

Animować obiekt za pomocą amplitudy dźwięku?

2012-11-19 10 views
5

Wiem, że można animować obiekt z dźwiękiem za pomocą Actionscript. Naprawdę mam nadzieję, że możliwe jest również animowanie obiektu za pomocą JavaScript, ponieważ są bardzo podobne.Animować obiekt za pomocą amplitudy dźwięku?

Może to zrobić za pomocą jQuery lub HTML5. Mam nadzieję, że znajdę sposób, aby to zrobić poza lampą błyskową.

Czy ktoś wie, czy jest to możliwe w którymś z tych formatów? Zrobiłem wiele badań i nie mogę znaleźć żadnych formularzy lub samouczków, które mówią, że jest to możliwe.

PODSTAWOWY, staram się osiągnąć ten sam efekt, który zakodowałem w Actionscript, ale chcę go kodować przy użyciu innego języka, aby nie można było zobaczyć również widoków flash.

Oto przykład lampa błyskowa:http://beaubird.com/presentation.php

Oto przykład animacji amplitudę ActionScript: http://www.developphp.com/view.php?tid=22

Źródło

2012-11-19 Papa De Beau

+1

Co dokładnie masz na myśli? Opublikowany film pokazuje faceta, który tworzy odtwarzacz we Flashu, ale co dokładnie chcesz osiągnąć? (Zdjęcie byłoby świetnie.) – corazza

+0

Chciałbym animować obiekt o amplitudzie, a mianowicie dziób, który otwiera się i zamyka dźwiękiem. Oto przykład tego, jak działa w trybie flash: http://beaubird.com/presentation.php –

+0

Może być możliwe dzięki nowym funkcjom HTML5, [spójrz na to] (http://www.html5rocks.com/ pl/tutoriale/getusermedia/intro /) –

Odpowiedz

4

Utworzyłem an example that changes the radius and color of an svg circle element based on audio amplitude.

To będzie działać w przeglądarkach WebKit, ale nic innego, jak. Przeglądarki Webkit są jedynymi przeglądarkami, które są nawet bliskie implementacji W3C Web Audio API Spec, o ile wiem, ale Mozilla Audio Data API Documentation wydaje się wskazywać, że Mozilla porzuciła tę specyfikację i będzie implementować interfejs Web Audio API. Jestem całkowicie nieświadomy stanu implementacji Internet Explorera (lub jej braku) w specyfikacji.

Niestety, obecnie odpowiedź brzmi, że nie ma w tym przypadku świetnego rozwiązania dla różnych przeglądarek niż Flash, ale jeśli wybierzesz tę trasę, masz na urządzeniu mobilnym. Jest to .

A oto kod:

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(); 
    }); 
});

Źródło

2012-11-20 05:44:22

+1

Myślę, że API Audio Data zostało odrzucone przez W3C i nie jest już rozwijane. Mozilla również teraz wdraża Web Audio. –

+0

Dzięki za informację @OskarEriksson. Zmieniłem moją odpowiedź, aby było to bardziej jasne. –

+0

+1 Oskar. Nie słyszałem tego, ale później znalazłem https://wiki.mozilla.org/Web_Audio_API – MikeSmithDev

Powiązane problemy

 Powiązane problemy