Error when playing audio file in wasm

[jeromeleong]

#[component]
fn Audio<G: Html>(cx: BoundedScope) -> View<G> {
    let file_ref = create_node_ref(cx);
    // Create a state variable to store the sink
    let sink = create_signal(cx, Sink::new_idle().0);
    view! {
        cx,
        input(type="file", ref=file_ref, on:change=move |_| {
            spawn_local_scoped(cx,async move {
                let file_el = file_ref.get::<DomNode>().unchecked_into();
                let file_stream = FileStream::new(file_el);
                let cursor = Cursor::new(file_stream.get_file().await);
                let buf_reader = std::io::BufReader::new(cursor);
                let decoder = Decoder::new(buf_reader).unwrap();
                let (_stream, stream_handle) = OutputStream::try_default().unwrap();
                // Create a sink to play the audio
                let new_sink = Sink::try_new(&stream_handle).unwrap();
                // Append the source to the sink
                new_sink.append(decoder);
                sink.set(new_sink);
            });
        })
        input(type="button", value="play", on:click= |_| {
            sink.get().play();
        })
        input(type="button", value="stop", on:click= |_| {
            sink.get().pause();
        })
    }
}

I try to use sycamore and rodio to build a simple webapp. But I upload music file and decode it, chrome console will show: Construction of AudioBufferSourceNode is not useful when context is closed. Connecting nodes after the context has been closed is not useful. Construction of AudioBufferSourceNode is not useful when context is closed. Connecting nodes after the context has been closed is not useful.

Could you please provide some guidance on how to resolve this issue? Thank you for your help.