Short sound with flash messages

Questions / Help
,
1

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”>
</audio>

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?

2

Autoplay has some fairly complicated rules around it:

3

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
4

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

5

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.

6

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
    ~H"""
    <.flash kind={:info} title="Success!" flash={@flash} />
    <.flash kind={:error} title="Error!" flash={@flash} />
    <.flash
      silenced={true} # flag to indicate no sound
      id="disconnected"
      kind={:error}
      title="We can't find the internet"
      phx-disconnected={show("#disconnected")}
      phx-connected={hide("#disconnected")}
      hidden
    >
      Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
    </.flash>
    """
  end
1 Like