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

[mysticflute]

trafficstars

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]

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?

[lhz516]

multi source is not supported. if you need playlist feature, I suggest you to manually maintain the list in a state.

See example: https://github.com/lhz516/react-h5-audio-player/blob/acec82a0d60b9bbba8348e9d49cdc2786ba9d79e/stories/playlist.tsx

[mysticflute]

Thanks for your response! Are there any technical reasons not to support multiple source tags? Like if I were to make a fork, do you think the existing code is incompatible with such a change without a lot of work?

[lhz516]

@mysticflute I actually misunderstood. I thought you were asking about a list of different songs.

For multi <source>s, I'm not sure if it works well with the custom UI, you can create a PR if you are interested.

[mysticflute]

@mysticflute I actually misunderstood. I thought you were asking about a list of different songs.

For multi <source>s, I'm not sure if it works well with the custom UI, you can create a PR if you are interested.

Ok, great! I will take a look.

[mysticflute]

@lhz516 hey, I started taking a look at this. Do you mind reopening it?

[mysticflute]

also it seems like you might be in the middle of some changes? (jest tests are currently disabled)

[mysticflute]

@lhz516 I can send a PR when you are ready.

[mysticflute]

@lhz516 checking again on this.

[mysticflute]

@lhz516 hey just checking again if you have some time. I'd like to fix this and possibly other issues as well.

[mysticflute]

@lhz516 checking again if I can do a PR for this?

[lhz516]

@mysticflute sorry for the delay. feel free to create a PR!