Reactjs Audio button?

Question

In html I create a audio button by this code

<html><head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
    </head><body>
        <script>
        function aud_play_pause() {
            var myAudio = document.getElementById("myTune");
            if (myAudio.paused) {
                myAudio.play();
            } else {
                myAudio.pause();
            }
        }
        </script>
        <audio id="myTune">
            <source src="./audio/rain.mp3">
        </audio>
        <div class="col-md-2">
            <div class="row">
              <div class="col-md-12">
                   <a class="btn btn-block btn-lg btn-primary" data-toggle="button" onclick = "aud_play_pause()">Rain</a>
             </div>
            </div>
        </div>
</body>

And it work but in reactjs I use three file below with same path with that html but code don't work like that, I get a blank website. Sorry for my bad english. index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Test.js

var React = require('react');  

var Test = React.createClass( {  
        aud_play_pause() {
            var myAudio = document.getElementById("myTune");
            if (myAudio.paused) {
                myAudio.play();
            } else {
                myAudio.pause();
            }
        },
        render () {
            return(
               <div>
                    <audio id="myTune">
                        <source src="./audio/rain.mp3" />
                    </audio>
                    <div className="col-md-2">
                        <div className="row">
                            <div className="col-md-12">
                                <a className="btn btn-block btn-lg btn-primary" data-toggle="button" onClick = {this.aud_play_pause()}>Rain</a>
                            </div>
                        </div>
                    </div>
               </div>
            );
        }
});
export default Test;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test';

ReactDOM.render(
  <Test />,
  document.getElementById('root')
);

Update your onclick code like this. onClick = {this.aud_play_pause} remove brackets. — Irfan Ali
– Irfan Ali, Commented Apr 12, 2017 at 3:58
Try to use react-bootstrap instead of btn btn-block ... and so on... — oklas
– oklas, Commented Apr 12, 2017 at 4:00
Thanks, but that help me display button but it don't have audio when I click on it like only use html — Tu Nguyen
– Tu Nguyen, Commented Apr 12, 2017 at 4:03

Shubham Khatri · Accepted Answer · 2017-04-12 04:11:20Z

0

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(
               <div>
                    <audio id="myTune" ref = {(ip)=> {this.mytune = ip}}>
                        <source src={require("./audio/rain.mp3")}/>
                    </audio>
                    <div className="col-md-2">
                        <div className="row">
                            <div className="col-md-12">
                                <a className="btn btn-block btn-lg btn-primary" data-toggle="button" onClick = {this.aud_play_pause}>Rain</a>
                            </div>
                        </div>
                    </div>
               </div>
            );
        }
});
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(
               <div>
                    <audio id="myTune" ref={(ip) => {this.mytune = ip}}>
                        <source src={require("./audio/rain.mp3")} />
                    </audio>
                    <div className="col-md-2">
                        <div className="row">
                            <div className="col-md-12">
                                <a className="btn btn-block btn-lg btn-primary" data-toggle="button" onClick = {this.aud_play_pause}>Rain</a>
                            </div>
                        </div>
                    </div>
               </div>
            );
        }
}
export default Test;

edited Apr 12, 2017 at 4:11

answered Apr 12, 2017 at 4:03

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tu Nguyen Over a year ago

Thanks, but that help me display button but it don't have audio when I click on it like only use html. Btw IDM identified that audio before I click but not audio is playing

Shubham Khatri Over a year ago

Wrap the audio src within the curly brackets. Updated the code. Also make use of ref callback to get access to the audio element which is the react way

Shubham Khatri Over a year ago

Glad to have helped. Also as suggested you should migrate to the ES6 way of writing React components

Irfan Ali · Accepted Answer · 2017-04-12 04:02:23Z

0

Update your Test.js like below.

var React = require('react');  

var Test = React.createClass( {  
        aud_play_pause: function() {
            var myAudio = document.getElementById("myTune");
            if (myAudio.paused) {
                myAudio.play();
            } else {
                myAudio.pause();
            }
        },
        render: function() {
            return(
               <div>
                    <audio id="myTune">
                        <source src="./audio/rain.mp3" />
                    </audio>
                    <div className="col-md-2">
                        <div className="row">
                            <div className="col-md-12">
                                <a className="btn btn-block btn-lg btn-primary" data-toggle="button" onClick = {this.aud_play_pause}>Rain</a>
                            </div>
                        </div>
                    </div>
               </div>
            );
        }
});
export default Test;

answered Apr 12, 2017 at 4:02

Irfan Ali

2,3581 gold badge24 silver badges23 bronze badges

3 Comments

Tu Nguyen Over a year ago

Thanks, but that help me display button but it don't have audio when I click on it like only use html

Tu Nguyen Over a year ago

Yep. IDM identified that audio before I click but not audio is playing before or after I click on it

Irfan Ali Over a year ago

disable your IDM extension in your browsers.

Collectives™ on Stack Overflow

Reactjs Audio button?

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related