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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with displaying visualization using js cdn #53

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Issue with displaying visualization using js cdn #53

vitaminsofsalem Feb 26, 2022

Replies: 2 comments

foobar404 Mar 7, 2022 Maintainer

foobar404 Mar 10, 2022 Maintainer

vitaminsofsalem
Feb 26, 2022

foobar404
Mar 7, 2022
Maintainer

foobar404
Mar 10, 2022
Maintainer