Still getting the hang of React, so bear with me if this explanation is a bit shaky. I'm in the process of creating a React project that allows users to search for tracks by artists using the Spotify API. The search results will display cards with artist information, and when a user clicks on a tag (which contains a URL to a song preview), I want to show an audio visualizer component that works with the audio analyzer node and audio tags.
I'm encountering two main issues:
1) I need to pass the clicked song preview URL from the href to the audio analyzer component as the audio source (similar to setting audio.src = preview_url). To solve this problem, I either need to a) update the state with the current clicked href or b) pass the preview URL as props to the audio visualizer component.
2) Upon clicking the tag, I want the ArtistCard component to disappear so that only the audio visualizer component is visible (hopefully easier than resolving the first issue).
Here's my code - apologies if it's a bit confusing. Feel free to ask for clarification if needed:
export default class ArtistCard extends Component {
constructor(props){
super(props)
this.state = {
renderAudioAnalyzer: false,
visibility: ''
}
}
togglePreviewUrlState(){
this.setState({ renderAudioAnalyzer: true })
if(this.state.renderAudioAnalyzer){
this.refs.artistCard.style.display = 'hidden'
//this currently doesn't work yet...
// style={{display: 'none'}} <--- do something like this?
}
}
render() {
let {tracks} = this.props
if(!this.state.renderAudioAnalyzer){
return (
<div className="card col s3" id="artistCard">
<div className="card-inner">
<div className="card-image">
<img alt="/logo.svg" className="Image" src={tracks.album.images[1].url}/>
<span className="card-title"></span>
</div>
<div className="card-content">
<p id="artistCardTrackName">{tracks.album.name}</p>
</div>
<div className="card-action">
<a
onClick={this.togglePreviewUrlState.bind(this)}
href={tracks.preview_url} //need to set this as state or pass as props?
>{tracks.name}</a>
</div>
</div>
</div>
)
}else{
return(
<div><AudioAnalyzer/></div>
)
}
}
}
And here is the audio visualizer component (still a work in progress but trying to figure out how to properly pass over the href):
export default class AudioAnalyzer extends Component {
constructor(props){
super(props)
}
render(){
return (
<div id="mp3_player">
<div id="audio_box">
<audio
refs="audio"
autoPlay="true"
controls="true"
src={this.props.tracks.preview_url} <--href needs to be passed to here some how?
>
</audio>
</div>
<canvas
refs="analyser"
id="analyser"></canvas>
</div>
)
}
}