通過聲音幅度動畫物體？

我知道可以通過Actionscript動畫聲音對象。我真的希望用JavaScript來動畫對象也是可能的，因爲它們非常相似。通過聲音幅度動畫物體？

也許可以用jQuery或HTML5完成。我只是希望找到一種方法在閃光燈之外做到這一點。

有誰知道這是可能的任何這些格式？我已經做了大量的研究，似乎無法找到任何可能與否的形式或教程。

基本上，我試圖達到同樣的效果，我在ActionScript中編碼，但我想用另一種語言編碼，所以沒有Flash視圖也可以看到。

這裏是閃例如：http://beaubird.com/presentation.php

這裏是動作幅度動畫的例子：我創建了an example that changes the radius and color of an svg circle element based on audio amplitude http://www.developphp.com/view.php?tid=22

來源

2012-11-19 Papa De Beau

你究竟是什麼意思？您發佈的視頻展示了一位在Flash中製作播放器的人，但您想要達到什麼目的？（一張圖片會很棒。） – corazza

我想動畫一個物體的振幅，即一個用聲音打開和關閉的喙。下面是Flash中如何工作的一個例子：http://beaubird.com/presentation.php –

這可能是新的HTML5功能，[看看這個]（http://www.html5rocks.com/ en/tutorials/getusermedia/intro /） –

。

這將工作在WebKit瀏覽器，但沒有別的。據我所知，Webkit瀏覽器是唯一實現了W3C Web Audio API Spec的瀏覽器，但Mozilla Audio Data API Documentation似乎表明Mozilla已經放棄了該規範，並且也將實現Web Audio API。我很幸福沒有意識到Internet Explorer的規範（或缺乏規範）的狀態。

不幸的是，現在的答案是，除了Flash之外，沒有其他跨瀏覽器的完美解決方案，但是如果你走這條路線，那麼你就會被困在移動設備上。

這是full, working JSBin example。

而這裏的代碼：

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

來源

2012-11-20 05:44:22

我認爲音頻數據API已被W3C拒絕，不再處於開發階段。 Mozilla現在也在實施Web Audio。 –

感謝@OskarEriksson的信息。我編輯了我的答案，使其更清楚。 –

+1奧斯卡。沒有聽說過，但後來發現https://wiki.mozilla.org/Web_Audio_API – MikeSmithDev

使用JavaScript節點來評估幅度將工作，但不太理想的性能的原因。我建議在requestAnimationFrame計時器上使用RealtimeAnalyser。您可以從http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs開始，使用較小的fftSize（128）和RMS值。

來源

2012-11-20 20:16:02 cwilso

酷！ +1教給我關於'requestAnimationFrame'的信息。 –

KievII庫（http://kievii.net）針對音頻應用程序。也許你可以在那裏找到有用的東西（例如，你可以爲一個Wavebox對象或一系列ClickBar對象設置動畫）。看看那裏的例子：http://kievII.net/examples.html

來源

2012-11-26 19:32:56 janesconference

通過聲音幅度動畫物體？

回答

相關問題