Liveview: audio.source tags are not updated

vitaliel · October 24, 2023, 9:31pm

Hello,

I created a simple app to read and listen small stories. The issue is that when I navigate to next story and hit play button for audio, browser plays audio file from previous page. I have to hit refresh page button to listen current story audio. The same issue with Firefox and MS Edge. What am I doing wrong?

Show story page:

github.com

vitaliel/story-reader/blob/master/lib/story_web/live/story_live/show.html.heex

<.header>
  <%= @story.id %>. <%= @story.title %>

  <:actions>
    <.link :if={@story.id > 1} patch={~p"/stories/#{@story.id - 1}"}>
      Prev
    </.link>

    <.link :if={@story.id < @story_count} patch={~p"/stories/#{@story.id + 1}"}>
      Next
    </.link>
  </:actions>
</.header>

<audio controls>
  <source
    :for={src <- @story.audio}
    src={src}
    type={
      if String.ends_with?(src, "ogg") do

This file has been truncated. show original

conradfr · October 24, 2023, 11:16pm

The audio tag has a specific behavior: javascript - How to force the HTML5 Audio tag to reload a (changing) file - Stack Overflow

I guess in your case the audio element stays the same (ie is not patched) as you only update the source within.

Maybe setting an id to it using the story.id would work.

vitaliel · October 25, 2023, 9:59am

Thanks @conradfr, I added <audio controls id={"audio-#{@story.id}"}> and it works.