Reactjs 音频按钮？_Reactjs - Fatal编程技术网

Reactjs 音频按钮？

reactjs

Reactjs 音频按钮？,reactjs,Reactjs,在html中，我通过以下代码创建了一个音频按钮 <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/l

在html中，我通过以下代码创建了一个音频按钮

<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>


函数aud\u play\u pause（）{
var myAudio=document.getElementById（“myTune”）；
如果（myAudio.paused）{
myAudio.play（）；
}否则{
myAudio.pause（）；
}
}
);
}
});
导出默认测试；

index.js

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

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

从“React”导入React；
从“react dom”导入react dom；
从“./Test”导入测试；
ReactDOM.render(
,
document.getElementById（'root'））
);

更新Test.js，如下所示

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;

var React=require（'React'）；
var Test=React.createClass（{
音频播放暂停：函数（）{
var myAudio=document.getElementById（“myTune”）；
如果（myAudio.paused）{
myAudio.play（）；
}否则{
myAudio.pause（）；
}
},
render:function（）{
返回(
雨
);
}
});
导出默认测试；

单击函数中的

。但是当您执行

onClick={this.aud\u play\u pause（）}

时，它将返回一个值。将onClick定义更改为

onClick = {this.aud_play_pause}

代码：

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;

像这样更新onclick代码。onClick={this.aud\u play\u pause}删除括号。尝试使用

react bootstrap

而不是

btn-btn-block…

等等…谢谢，但这有助于我显示按钮，但当我单击它时它没有音频，就像只使用HTMLhanks一样，但这有助于我显示按钮，但当我单击它时它没有音频，就像只使用htmlYep一样。IDM在我单击之前识别出音频，但在我单击之前或之后没有音频播放。请在浏览器中禁用IDM扩展。谢谢，但这有助于我显示按钮，但当我单击它时它没有音频，就像只使用html一样。顺便说一句，IDM在我单击之前识别了音频，但没有音频正在播放将音频src包装在花括号内。更新了代码。还可以使用ref callback访问音频元素，这是我很高兴能够提供帮助的方法。正如建议的那样，您应该迁移到ES6编写React组件的方式

onClick = {this.aud_play_pause}

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;

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;