search

lhz516 / react-h5-audio-player

React audio player component with UI. It provides time indicator on both desktop and mobile devices.
https://codepen.io/lhz516/pen/dyGpmgP
MIT License
622 stars 97 forks source link

Using multiple <source> tags as children instead of the "src" property doesn't seem to work #249

Open mysticflute opened 1 month ago

mysticflute commented 1 month ago

Describe the bug

<audio> tags support multiple <source> tags as children, instead of using the src property, as demonstrated here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#usage_notes

The reason for doing this is to provide different file types and let the browser determine the best source. 

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
</audio>

While the src prop is marked as optional for the React component, it doesn't seem to be able to actually play the audio if it's not specified. It might be because there is code checking that the src property is defined before invoking the play method on the underlying audio tag.

Environment

Package version: 3.9.1 React version: Browser and its version: OS and its version:

mysticflute commented 1 month ago

possibly caused by this line: https://github.com/lhz516/react-h5-audio-player/blob/acec82a0d60b9bbba8348e9d49cdc2786ba9d79e/src/index.tsx#L207

maybe a fix would be to change this to check that src is truthy or children is not empty?