Styling the player

[vbudilov]

Can't seem to style the player. Is there a way to get to the actual 'audio' tag? Doing something like the following doesn't work (except for the width):

                            <ReactAudioPlayer
                                src={this.state.url}
                                autoPlay
                                controls={true}
                                volume={1.0}
                                style={{width: '100%', backgroundColor: "#fff", color: '#fff'}}
                                ref={(element) => {
                                    this.rap = element;
                                    this.rap.audioEl.backgroundColor = "#fff"
                                }}
                            />

[vbudilov]

Per this stackoverflow question, you have to hide the browser-based implementation and just control the playback using JS.

Is there a way of achieving this with this reactjs library?

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

[lhz516]

If you are looking for React audio player with UI, you can try this one react-h5-audio-player which is also based on audio tag. Feel free to give me some feedbacks!