文章/答案/技术大牛

发布

问反应音频按钮？
EN

Stack Overflow用户

提问于 2017-04-12 03:55:21

回答 2查看 1.2K关注 0票数 0

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

它可以工作，但在reactjs中，我使用了下面的三个文件，与html的路径相同，但是代码不是那样工作的，我得到了一个空白的网站。对不起我的英语不好。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')
);

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-12 04:03:06

function中的onClick需要一个函数。但是，当您执行onClick = {this.aud_play_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;

您还需要一个绑定器，例如webpack来传输您的代码。

请参阅安装示例这里：

此外，如果您使用最新版本的React，您将得到一个警告，即afte v15.5.0 React.createClass将被废弃，因此最好从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;

票数 0

Stack Overflow用户

发布于 2017-04-12 04:02:23

更新您的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;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43359992

复制

相似问题

问反应音频按钮？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应音频按钮？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应音频按钮？
EN