[Day17] POPCAT in WASM (Part 1)

Owo 昨天遇到的问题解决了
所以今天跟明天就来加菜吧！
这个专案会分两天写

那今天最後会得到的成果是

OK 先来讲讲我遇到的问题吧
我遇到的问题貌似是资源读取不了
但是在我换成 wasm-pack build以後就不会出现问题了 owob
那要改成使用 wasm-pack 记得使用 lib.rs 而不是 main 档喔
怎麽使用在第一篇 wasm 这边不多赘述
那从 create 开始讲ㄅ

fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
    let sounds web_sys::HtmlAudioElement::new_with_src("./pop.wav").expect("");
    console::log!("ok");
    Self {
        link,
        value: 0,
        sounds,
    }
}

那可以看到这边 我将 pop.wav 引入成了 sounds
那可以发现说使用了 web_sys 的 HtmlAudioElement 那是什麽？
这就一个用来连结 浏览器的套件的一个东东
要怎麽引入呢
当然

$ cargo add web_sys

这是必须的
只是还缺了一个
他要使用这个功能必须要在 feature 那边增加也就是

web-sys = { version = "0.3.55", features = ["HtmlAudioElement"] }

会变成这样
这样就能够使用了 owob
那可以看到下面

fn update(&mut self, msg: Self::Message) -> ShouldRender {
    match msg {
        Msg::AddOne => {
            self.value += 1;
            self.sounds.set_current_time(0.0);
            let _ = self.sounds.play().expect("failed to play audio");
            console::log!("add one and has sounds");
            true
        }
    }
}

这边我使用了 let _ 也就是前面讲过得忽略用字
那对他 play 会回传 Result 所以就直接 .expect 去实现
至於下面的部份就不多说了
基本上就是昨天有讲到的部份
喔对了 CSS 部份直接抄就好了 我也是直接上网找的因为我不会 CSS

Code在这里
走过路过给个星星吧

我写的时候已经完成这个专案了
但是还是明天在讲 owob
各位晚安