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
各位晚安