Giters

foobar404 / wave.js

Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Home Page:https://foobar404.github.io/wave.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

wave.fromStream is broken

yulius-take2 opened this issue · comments

commented

https://github.com/foobar404/Wave.js/blob/master/src/fromStream.js#L38

frameCount is not passed in if you use wave.fromStream

commented

any fixes to this ? the fromStream method doesn't work for me either...

commented

damn this is the reason...

commented

damn this is the reason...

Could you please give a try to the master branch of my rewrite to see if it fixed your problem, we might, hopefully, integrate this in this repo later?
#27

commented

Hi, not sure if I missed anything, but I'm trying wave.fromStream using the master branch and it still does not work using the basic example from the README.

Any update, please? Thanks

<html>

<head></head>

<body>

   <canvas id="output" height="500" width="500"></canvas>

   <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.iife.js"></script>
   <script>
      let wave = new Wave();

      navigator.mediaDevices.getUserMedia({
            audio: true
         })
         .then(function (stream) {
            wave.fromStream(stream, "output", {
               type: "shine",
               colors: ["red", "white", "blue"]
            });
         })
         .catch(function (err) {
            console.log(err.message)
         });
   </script>
</body>

</html>

P.S.
No error from console, but just get a blank canvas...

commented

this seems to work perfectly
as soon as we get stream from getUserMedia()

1.create the audio element => const audio = document.createElement('audio')
2.set the id attribute of audio element => audio.setAttribute('id', 'audios')
3.set the source of audio element by providing our stream => audio.srcObject= stream
4.provide controls just to play around => audio.controls = true
5.add listener to audio element as soon as the audio element is ready to play the audio =>
audio.addEventListener('loadedmetadata', () => {
audio.play()
})
6.finally append that audio element to body => document.querySelector('body').append(audio)
7.use wave.fromElement =>wave.fromElement('audios', 'output', { type: 'shine',colors: ['red', 'white', 'blue']})

here is the working code.....
image