Short sound with flash messages

Hi guys!
I’m making a monitoring server and displaying messages or notifications with the flash-messages. I want to play a short sound when a flash-message appears (like beep).
I try to use

<audio autoplay>
  <source src=“audio/beep.mp3”>

inside flash element in core_components.ex, but no sound is playing.
Is there any way to play a short beep when a message appears?

Autoplay has some fairly complicated rules around it:

I would instead favor using first class browser notifications instead so that your notifications can be integrated properly into the users notification preferences

1 Like

Thank you benwilson512, could you recommend some example about work with first class browser notifications? Does this decision depend on the type of browser?

The problem was in the unavailability of a static route to the folder “audio” in my_app_web.ex. I add “audio” to static_path:

def static_paths, do: ~w(assets fonts images audio favicon.ico robots.txt)

Audio is working well now with flash-messages, but there is another question: how to detect hidden “disconnected” flash-message? I don’t want to play sound with it.
Thank you.

It depends on how you ended up implementing the sound playback.

For example, assuming you’re using the default .flash_group core component and the default .flash core component updated to include <audio autoplay>, you could pass a flag e.g. silenced to the .flash core component that indicates whether it should play a sound or not by conditionally rendering <audio autoplay>.

  def flash_group(assigns) do
    <.flash kind={:info} title="Success!" flash={@flash} />
    <.flash kind={:error} title="Error!" flash={@flash} />
      silenced={true} # flag to indicate no sound
      title="We can't find the internet"
      Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
1 Like