Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to set audio tag attributes #1124

Closed
sgrove opened this issue Feb 18, 2014 · 3 comments · Fixed by #1128
Closed

Unable to set audio tag attributes #1124

sgrove opened this issue Feb 18, 2014 · 3 comments · Fixed by #1128

Comments

@sgrove
Copy link

sgrove commented Feb 18, 2014

This is a limitation of the HTML5/javascript API for <audio> tags from what I can see, but maybe React can work around it (like it does to normalize <textarea> tags, etc.)

I would like to be able to do something like this pseudo-code:

var myAudioTag = React.createClass({
    render: function() {
          return <audio src={this.props.src} volume={this.props.volume} muted={this.props.muted}>
    }
});

And have React 1.) pick up on the muted attribute change, then 2.) take care of invoking the javascript interface targetAudioTag.muted = true/false. Same for attributes paused, etc.

@syranide
Copy link
Contributor

@sgrove That's definitely something React should do, but the attributes/properties are not listed in DefaultDOMPropertyConfig at this time and that's why you're not getting any result. If you're up to it, you could submit a PR for it. :)

However, I must warn you that audio-tags are barely practically functional in React today, if any of its ancestors siblings are reordered at all, the audio will likely pause. I have a pending PR for it, but it's not landing for 0.9.0, #870

@sgrove
Copy link
Author

sgrove commented Feb 18, 2014

That's great, happy to send the PR later this week. Thanks @syranide, appreciate the speedy response!

sophiebits added a commit to sophiebits/react that referenced this issue Feb 18, 2014
Fixes facebook#1124.

I didn't add `volume` because it requires more complicated logic to control properly and I didn't add `paused` because to set it we need to call play() or pause() -- perhaps a mutation method is appropriate.
@webdesignermall
Copy link

webdesignermall commented Apr 12, 2018

@sgrove I see that you posted this is 4 years ago, but I also built an MP3 player from React this year and I had the same issue. What worked for me was adding the lifecycle method of componentWillReceiveProps. It solved my issue immediately.

componentWillReceiveProps() {
this.refs.audio.pause();
this.refs.audio.load();
this.refs.audio.play();
this.setState((state) => ({
showSoundWave:'soundwave'
}));
}

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 a pull request may close this issue.

3 participants