React: Audio <source> src attribute updates are not recognized

Created on 17 Apr 2017 · 3Comments · Source: facebook/react

Do you want to request a feature or report a bug?

bug

Searched other issues but couldn't find anything discussing using <source> tags within <audio> tags. I think it's more of a browser problem than a React problem as it updates the DOM fine but I thought there should be a discussion on solutions/next steps.

What is the current behavior?

Source src example: https://jsfiddle.net/danbovey/km5c3zmq/
Audio src example: https://jsfiddle.net/danbovey/v40cbwpx/

The browser is not recognising any changes React makes to the src prop of <source>, if you change the src prop directly on the <audio> tag the browser re-renders/resets the audio tag as expected.

What is the expected behavior?

The source example should match the behaviour of the audio example. Happens in all browsers.

Source

danbovey

Most helpful comment

Thanks for the report @danbovey! This appears to expected behavior. This example shows that setting src on a source element does not update update it's parent media element. This is consistent in Firefox and Chrome.

We can look into ways around this. For now, you can use a key on the audio elements to force React to create new DOM elements, which seems to provide the behavior you're looking for https://jsfiddle.net/74oqdtd8/

aweary on 17 Apr 2017

🎉7 👍1

All 3 comments

aweary on 17 Apr 2017

🎉7 👍1

Cool, like I said, I thought it was a browser issue but I don't know much about submitting bugs/feature request to browser vendors - hopefully there's an existing conversation for this, which means this can be closed as it's not React's problem.

danbovey on 18 Apr 2017

Yeah, I'll close this since it's apparently expected and there's an easy workaround.

aweary on 21 Apr 2017

👍3

Was this page helpful?

0 / 5 - 0 ratings