"Missed function: audio_source_is_loaded"

AuraPy commented 2 weeks ago

I made a game in macroquad and all is working fine on fedora 40, but when I try to compile and run it on Firefox, I get the warning "Missed function: audio_source_is_loaded" repeated an infinite amount of times along with a bunch of other warnings and all that shows up is a black screen.

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Challenge Accepted</title>
        <style>
            html,
            body,
            canvas {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: absolute;
                background: black;
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="glcanvas" tabindex='1'></canvas>
        <script src="https://not-fl3.github.io/miniquad-samples/gl.js"></script> <!-- gl.js from miniquad repo (native/sapp-wasm/js/gl.js) -->
        <script>load("target/wasm32-unknown-unknown/debug/challenge-accepted.wasm");</script> <!-- Your compiled wasm file -->
    </body>
</html>

main.rs:

use macroquad::prelude::*;
use macroquad::rand::RandomRange;
use macroquad::audio::{load_sound, play_sound_once};

#[macroquad::main("Challenge Accepted")]
async fn main() {
    let mut ball_x = 330.0;
    let mut ball_y = 80.0;
    let mut dy = 1.0;
    let mut dx = 0.0;
    let kineticmult = 0.75;
    let mut orbs: Vec<(f32, f32)> = Vec::new();
    let mut yelloworbs: Vec<(f32, f32)> = Vec::new();
    let mut milestones = Vec::new();
    let mut score = 0;
    let point = load_sound("src/point.wav").await.unwrap();

    milestones.push(0);

    for _ in 0..5 {
        orbs.push((RandomRange::gen_range(0.0, screen_width()), RandomRange::gen_range(0.0, screen_height())));
    }

    loop {
        clear_background(BLACK);
        for pos in &orbs {
            draw_circle(pos.0, pos.1, 10.0,  WHITE);
        }
        for pos in &yelloworbs {
            draw_circle(pos.0, pos.1, 10.0,  YELLOW);
        }

        draw_circle(ball_x, ball_y, 20.0, Color::from_rgba(255, 100, 140, 255));
        for i in 0..orbs.len() {
            let pos = orbs[i];
            if ((pos.0 - ball_x).abs() < 30.0) && ((pos.1 - ball_y).abs() < 30.0) {
                orbs[i] = (RandomRange::gen_range(0.0, screen_width()), RandomRange::gen_range(0.0, screen_height()));
                score += 1;
                play_sound_once(&point);
            }
        }
        for i in 0..yelloworbs.len() {
            let pos = yelloworbs[i];
            if ((pos.0 - ball_x).abs() < 30.0) && ((pos.1 - ball_y).abs() < 30.0) {
                yelloworbs[i] = (RandomRange::gen_range(0.0, screen_width()), RandomRange::gen_range(0.0, screen_height()));
                score += 2;
                play_sound_once(&point);
            }
        }

        ball_y += dy;
        ball_x += dx;
        dy += 0.15;

        if score % 10 == 0 && !milestones.contains(&score) {
            if score >= 50 {
                yelloworbs.push((RandomRange::gen_range(0.0, screen_width()), RandomRange::gen_range(0.0, screen_height())));
            }
            orbs.push((RandomRange::gen_range(0.0, screen_width()), RandomRange::gen_range(0.0, screen_height())));
            milestones.push(score);
        }

        let text_size = measure_text(&score.to_string(), None, 80, 1.0);
        draw_text(&score.to_string(), screen_width()/2.0-text_size.width/2.0, 70.0, 80.0, WHITE);

        if ball_y + 20.0 >= screen_height() {
            if dy > 0.0 {
                dy = -(dy*kineticmult);
            }
            if dy > -0.8 && dy < 0.0 {
                dy = 0.0
            }
        }

        if is_key_down(KeyCode::Space) {
            if ball_y + 20.0 >= screen_height() {
                dy += -4.0
            }
        }
        if is_key_down(KeyCode::A) {
            dx += -0.2;
        } else{
            if is_key_down(KeyCode::D) {
                dx += 0.2;
            } else {
                if dx < -0.1 {
                    dx += 0.2;
                } else {
                    if dx > 0.1 {
                        dx += -0.2;
                    } else {
                        dx = 0.0;
                    }
                }
            }
        }
        if ball_x + 20.0 > screen_width() {
            ball_x = screen_width() - 20.0;
            dx = 0.0;
        }
        if ball_x - 20.0 < 0.0 {
            ball_x = 20.0;
            dx = 0.0;
        }

        next_frame().await
    }
}

not-fl3 commented 2 weeks ago

    <script src="https://not-fl3.github.io/miniquad-samples/gl.js"></script> <!-- gl.js from miniquad repo (native/sapp-wasm/js/gl.js) -->

you want js file for macroquad, https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js

or take it from https://github.com/not-fl3/macroquad/blob/master/js/mq_js_bundle.js and host alongside with your .wasm

AuraPy commented 2 weeks ago

Thank you so much! This worked for me :)

not-fl3 / macroquad

"Missed function: audio_source_is_loaded" #742