首页 > 解决方案 > 如何从Javascript中的音频元素获取音频样本?

问题描述

我想制作一个取决于音量的动画(例如,当音量更大时它会更亮,而当音量更安静时它会更暗)。我找到了一种算法来获取部分音频的音量,但我需要音频样本才能使用它。所以我有一个audio看起来像这样的元素:

<audio preload="auto" src="my/path.mp3"></audio>

我正在使用它new Audio();,我把它放在变量中audio。我读过一篇文章:https ://wiki.mozilla.org/Audio_Data_API它告诉我可以使用MozAudioAvailable,它看起来像这样:

function loadedMetadata() {
        channels          = audio.mozChannels;
        rate              = audio.mozSampleRate;
        frameBufferLength = audio.mozFrameBufferLength;
         
        fft = new FFT(frameBufferLength / channels, rate);
}
function audioAvailable(event) {
        var fb = event.frameBuffer,
            signal = new Float32Array(fb.length / channels),
            magnitude;

        for (var i = 0, fbl = frameBufferLength / 2; i < fbl; i++ ) {
          signal[i] = (fb[2*i] + fb[2*i+1]) / 2;
        }
}
var audio = document.getElementById('audio-element');
audio.addEventListener('MozAudioAvailable', audioAvailable, false);
audio.addEventListener('loadedmetadata', loadedMetadata, false);

所以在变量signal中有我想要获取的样本,但看起来MozAudioAvailable事件在 HTML 和我阅读的任何文档中都不存在。那么如何从 Audio 元素中获取音频样本呢?或者也许现在有一个别名MozAudioAvailable?

谢谢你。

标签: javascriptaudio

解决方案


推荐阅读