Issue with displaying visualization using js cdn #53

vitaminsofsalem · 2022-02-26T16:53:03Z

vitaminsofsalem
Feb 26, 2022

I'm having issues with running the code in the documentation. I copied the code verbaitm but it's not displaying anything on my end. I'm using liveServer to run the "index.html" file. It's playing audio in my headphones and not visualizing anything. Any help ?

<!DOCTYPE html>
<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>

Answered by foobar404

Mar 7, 2022

Your right, the code above does not work as is, it might be due to merging code from other branches but im not sure. Currently im working on v2, which is completely different from the current version, so you might have to wait for that to be published, but here is another simple example that does not require your mic, maybe that will work.

let wave = new Wave(); 
let options = {
        type: "shine",
        colors: ["red", "white", "blue"]
}

wave.fromElement("audio_element_id", "canvas_element_id", options);

you just need a canvas element, and a audio element with an audio file in its src

View full answer

foobar404 · 2022-03-07T17:12:24Z

foobar404
Mar 7, 2022
Maintainer

Your right, the code above does not work as is, it might be due to merging code from other branches but im not sure. Currently im working on v2, which is completely different from the current version, so you might have to wait for that to be published, but here is another simple example that does not require your mic, maybe that will work.

let wave = new Wave(); 
let options = {
        type: "shine",
        colors: ["red", "white", "blue"]
}

wave.fromElement("audio_element_id", "canvas_element_id", options);

you just need a canvas element, and a audio element with an audio file in its src

0 replies

foobar404 · 2022-03-10T19:42:55Z

foobar404
Mar 10, 2022
Maintainer

This issue should be resolved now.

0 replies

Navigation Menu

Uh oh!

Issue with displaying visualization using js cdn #53

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issue with displaying visualization using js cdn #53

Uh oh!

vitaminsofsalem Feb 26, 2022

Replies: 2 comments

Uh oh!

foobar404 Mar 7, 2022 Maintainer

Uh oh!

foobar404 Mar 10, 2022 Maintainer

vitaminsofsalem
Feb 26, 2022

foobar404
Mar 7, 2022
Maintainer

foobar404
Mar 10, 2022
Maintainer