wavesurfer.js dosyasını bir CSS özelliğini canlandırmak için kullanma

Question

wavesurfer.js bir ses dosyasından bir dalga biçimi oluşturmak için harikadır, ancak oluşturulmakta olan herhangi bir CSS özelliğini dalga biçimi/spektrografının genliğine/frekansına ekleyebilme özelliğinin olup olmadığını merak ediyorum wavesurfer.js tarafından Başka bir parametreye atayabileceğim bir çeşit değişken var mı (örneğin: <img>'un opaklığı)?

Answer 1

wavesurfer.js dosyasına bakıldığında, numaralı telefonu kullanarak wavesurfer.backend.analyser'u kullanabilirsiniz.

Not: analyser'un AnalyserNode'un bir örneği olduğunu kontrol etmeniz gerekir. Tarayıcı sadece Web Audio API'u destekliyorsa bu olacaktır.

AnalyserNode'dan, AnalyserNode.frequencyBinCount özelliğinden creating a visualisation/animation başlatabilirsiniz.

Sitelerinde wavesurfer.js examples numaralı binadan basit bir örnek (codepen) yapıyorum.

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>