Uncaught TypeError: this.current_stream.loop is not a function

[DubStepMad]

Followed the guide to use the CDN version and how to start the stream, etc but I am getting the following error.

wave.js:266 Uncaught TypeError: this.current_stream.loop is not a function at Wave.playStream (wave.js:266) at playSound (player.js:46) at change (player.js:72) at HTMLElement.onclick ((index):214)

[rynstwrt]

Had this happen to me, got it working by editing the library's JS file.

In the renderFrame() function inside of the fromStream(stream, canvas_id, options = {}) function, self.visualize() is being called without the frame parameter, and results in frame being undefined inside of the visualize function.

TLDR:

Simply changing the line that goes:
self.visualize(self.current_stream.data, self.current_stream.id, self.current_stream.options);

to instead be:
self.visualize(self.current_stream.data, self.current_stream.id, self.current_stream.options, 1);

I don't know if there's more to be fixed but it seems that all the frame parameters are called with 1 anyway, so the solution makes sense.

Hope this helped!

[DubStepMad]

Had this happen to me, got it working by editing the library's JS file.

In the renderFrame() function inside of the fromStream(stream, canvas_id, options = {}) function, self.visualize() is being called without the frame parameter, and results in frame being undefined inside of the visualize function.

TLDR:

Simply changing the line that goes:
self.visualize(self.current_stream.data, self.current_stream.id, self.current_stream.options);

to instead be:
self.visualize(self.current_stream.data, self.current_stream.id, self.current_stream.options, 1);

I don't know if there's more to be fixed but it seems that all the frame parameters are called with 1 anyway, so the solution makes sense.

Hope this helped!

My issue is regarding the fromElement method and the line it refers to is the following

function playStream() {
        this.current_stream.loop();
    }

[rynstwrt]

Oh! I had this occur a few times, but it seemed to stop happening out of the blue.

Which function are you calling on the wave object? fromStream?

this.current_stream should be assigned to the renderFrame function at the end of the fromStream function.

Here's a screenshot of the relevant section in my library file.

Also, can I see your code? Here is what's working for me:

const wave = new Wave();
function onMicAccess(stream)
{
    wave.fromStream(stream, canvas.id, designs[0]);
    wave.playStream();
}

I'm waiting for the user to interact with the page before requesting audio access to prevent Chrome from blocking it due to their auto-play policy, then calling navigator.mediaDevices.getUserMedia. If that promise is resolved, onMicAccess is called.

[DubStepMad]

Oh! I had this occur a few times, but it seemed to stop happening out of the blue.

Which function are you calling on the wave object? fromStream?

this.current_stream should be assigned to the renderFrame function at the end of the fromStream function.

Here's a screenshot of the relevant section in my library file.
Also, can I see your code? Here is what's working for me:

const wave = new Wave();
function onMicAccess(stream)
{
    wave.fromStream(stream, canvas.id, designs[0]);
    wave.playStream();
}

I'm waiting for the user to interact with the page before requesting audio access to prevent Chrome from blocking it due to their auto-play policy, then calling navigator.mediaDevices.getUserMedia. If that promise is resolved, onMicAccess is called.

The way I am implementing this is to have a visual when the user interacts with the 'play' button on a radio website, however I still get the same error relating to fromElement as I cannot use fromStream on a URL.

Snippets in order of process:

const player = $("#music_player");
const audioElement = document.querySelector("audio");
const src = 'https://simulatorfm.stream/radio/8080/radio.mp3?'+(new Date).getTime();
const wave = new Wave();

function change (){
    if(document.getElementById('icon1').className === "fa-solid fa-play fa-5x audio-control-play") {
        playSound();
        document.getElementById('icon1').className = "fa-solid fa-pause fa-5x audio-control-pause";
    }else {
        pauseSound();
        document.getElementById('icon1').className = "fa-solid fa-play fa-5x audio-control-play";
    }
}

function playSound() {
    if (!player.attr('src')) {
        player.attr("src", src);
        audioElement.load(); // This restarts the stream download
    }

    $('#backgroundArt').css('animation', 'spin infinite 15s linear');
    audioElement.play();
    waveOb();
}

function waveOb() {
    const options = {
        type: "bar",
        colors: ["red", "white", "blue"]
    }
    wave.fromElement(audioElement, 'output', options);
    wave.playStream();
}