Skip to content

Support multiple source elements#262

Open
mysticflute wants to merge 4 commits into
lhz516:masterfrom
mysticflute:multiple-sources
Open

Support multiple source elements#262
mysticflute wants to merge 4 commits into
lhz516:masterfrom
mysticflute:multiple-sources

Conversation

@mysticflute
Copy link
Copy Markdown

Fixes #249.

This adds support for multiple <source> elements as an alternative to a single src attribute. Example:

<AudioPlayer
  srcKey={track.key}
  ...
>
  <source src={track.aacUrl} type="audio/aac" />
  <source src={track.oggUrl} type="audio/ogg" />
  <source src={track.mp3Url} type="audio/mpeg" />
  <source src={track.wavUrl} type="audio/wav" />
</AudioPlayer>

I'm using the currentSrc attribute to achieve this, based on this info:
Screenshot 2025-01-08 at 20 37 11
Screenshot 2025-01-08 at 20 34 24

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc

@mysticflute mysticflute changed the title Support multiple child source elements Support multiple source elements Sep 3, 2025
@mysticflute mysticflute marked this pull request as draft September 3, 2025 20:01
@mysticflute mysticflute marked this pull request as ready for review September 4, 2025 00:10
Comment thread stories/playlist.tsx Outdated
Comment on lines +59 to +71
<AudioPlayer
srcKey={track.src}
onEnded={this.handleClickNext}
autoPlayAfterSrcChange={true}
showSkipControls={true}
showJumpControls={false}
onClickPrevious={this.handleClickPrevious}
onClickNext={this.handleClickNext}
>
<source src={track.src} type={track.type} />
{track.additionalSrcs &&
track.additionalSrcs.map(({ src, type }) => <source key={src} src={src} type={type} />)}
</AudioPlayer>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel using srcKey is confusing since in a native audio tag, it either has src attribute or source children. could you try an approach that only uses sources without adding a new prop?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lhz516 what do you think of the changes?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lhz516 please look when you get a chance

Comment thread src/index.tsx

if (prevProps.src !== src) {
isAudioSrcChanged = true
} else if (children && Children.count(children) > 0) {
Copy link
Copy Markdown
Author

@mysticflute mysticflute Sep 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably not the best idea to check the children like this, but it does add to the convenience for autoplay.

alternatively i could remove it, leaving the dev to implement autoplay when using <source> elements, perhaps an approach with useEffect with the playlist index changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants