Reactjs Audio button?

Question

In html I create a audio button by this code

Answer 1

onClick in react expects a function . But when you do onClick = {this.aud_play_pause()}, it is returned a value . Change the onClick definition to

onClick = {this.aud_play_pause}

Code:

var React = require('react');  

var Test = React.createClass( {  
        aud_play_pause() {
            var myAudio = this.mytune;
            if (myAudio.paused) {
                myAudio.play();
            } else {
                myAudio.pause();
            }
        },
        render () {
            return(
               

                    
                    

                        

                            

                                Rain
                            
                        
                    
               
            );
        }
});
export default Test;

You will also need a bundler for instance webpack to transpile your code.

See the setup example here:

Also if you use the latest version of React , you will get a warning that afte v15.5.0 React.createClass will be deprecated and hence it will be better to start of with the React.Component

import React from 'react';  

class Test extends React.Component{

        aud_play_pause() {
            var myAudio = this.myTune;
            if (myAudio.paused) {
                myAudio.play();
            } else {
                myAudio.pause();
            }
        }
        render () {
            return(
               

                    
                    

                        

                            

                                Rain
                            
                        
                    
               
            );
        }
}
export default Test;