wavesurfer.jsを使用してCSSプロパティをアニメーション化する

Question

wavesurfer.jsは、オーディオファイルから波形をレンダリングするのに最適ですが、生成される波形/スペクトログラフの振幅/周波数にCSSプロパティをアニメーション化することが可能かどうかは疑問ですによってwaveurfer.js？別のパラメータに割り当てることのできる変数の種類がありますか（たとえば、不透明度が<img>）？

Answer 1

wavesurfer.jsを見るとAnalyserNodeをwavesurfer.backend.analyserで取得できます。

注：analyserがAnalyserNodeのインスタンスであることを確認する必要があります。ブラウザがWeb Audio APIをサポートしている場合のみです。

AnalyserNodeからAnalyserNode.frequencyBinCountプロパティを取得すると、creating a visualisation/animationを開始できます。

自分のサイトのwavesurfer.js examplesに簡単な例（codepen）を作成しました。

var wavesurfer = WaveSurfer.create({ 
 
    container: '#waveform', 
 
    waveColor: '#5B88C8', 
 
    progressColor: '#264E73' 
 
}); 
 
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'); 
 

 
//get the AnalyserNode from wavesurfer 
 
//@see https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode 
 
var analyser = wavesurfer.backend.analyser, 
 
    //array to store the frequency data 
 
    //@see https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData 
 
    frequencyData = new Uint8Array(analyser.frequencyBinCount), 
 

 
    //div to animate and play/pause button 
 
    box = document.getElementById('box'), 
 
    play = document.getElementById('play'); 
 

 
//play button - play pause audio 
 
play.addEventListener('click', function() { 
 
    wavesurfer.playPause(); 
 
}); 
 

 
//wavesurfer 'audioprocess' event Fires continuously as the audio plays @see events on wave surfer http://wavesurfer-js.org/docs/events.html 
 
wavesurfer.on('audioprocess', function(e) { 
 

 
    analyser.getByteFrequencyData(frequencyData); 
 
    //console.log(frequencyData); 
 

 
    //simple example - get the first value in the array and set the width of the box 
 
    var w = frequencyData[0] * 0.05; 
 
    //apply a scale transform; 
 
    box.style.transform = 'scale(' + w + ',1)'; 
 

 
});

/* add some transition */ 
 

 
.animation { 
 
    margin: 50px auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #71C2D0; 
 
    transition: transform 0.1s ease-out; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script> 
 
<div id="waveform"></div> 
 
<div id="box" class="animation"></div> 
 
<button id="play">Play</button>