Creating a React audio player

npx create-react-app spatialsound
<audio src=""></audio>
<audio src={this.state.song}></audio>
state = {
song: process.env.PUBLIC_URL + 'thedeli.mp3',
}
componentDidMount(){
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
}
state = {
song: process.env.PUBLIC_URL + 'thedeli.mp3',
audioContext: null
}
//componentDidMount
this.setState(audioContext: audioContext)
const audioElement = document.querySelector('audio');
this.setState({audioElement:audioElement})
componentDidMount(){
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
this.setState({audioContext: audioContext})
const audioElement = document.querySelector('audio');
this.setState({audioElement:audioElement})
const track = audioContext.createMediaElementSource(audioElement);
track.connect(audioContext.destination);
}
audioElement.play();
audioElement.pause();
//PlayClick.jsimport React from Reactexport default class PlayClick extends React.Component{
render(){
return(
<h1> PlayClick </h1>
)
}
}
import PlayClick from './PlayClick'
playClickHandler = (e) => {
console.log(e)
}
render(){
console.log(this.state)
return(
<div>
<h1> Hello </h1>
<audio src={this.state.song}></audio>
<PlayClick playClickHandler={this.playClickHandler}/>
</div>
)
}
}
import React from 'react'export default class PlayClick extends React.Component{
render(){
console.log(this.props)
return(
<button> Play </button>
)
}
}
<button onClick={
(e) => {
this.setState({playing:!this.state.playing},
this.props.playClickHandler(this.state.playing)
)
}
}>
this.state.audioContext.resume();
if(this.state.playing === false){
console.log("playing")
this.state.audioElement.play()
}else if(this.state.playing === true){
console.log("notplaying")
this.state.audioElement.pause()
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store