Reactjs 音频按钮？

IT技术 reactjs
2021-05-19 23:14:30

在 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 具有相同路径的文件，但是代码不能那样工作，我得到了一个空白网站。对不起，我的英语不好。索引.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>

测试.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;

索引.js

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

ReactDOM.render(
  <Test />,
  document.getElementById('root')
);
2个回答

onClick在 react 中需要一个函数。但是当你这样做时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，您将收到一条警告，说 aftev15.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;

像下面这样更新你的 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;
其它你可能感兴趣的问题
上一篇react脚本 3.4.0 的 npm start 问题 下一篇如何使 PLA 中的 3D 打印部件具有闪亮光滑的表面？