Reactjs 音频按钮? [英] Reactjs Audio button?

查看：20
本文介绍了Reactjs 音频按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<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><脚本>功能 aud_play_pause() {var myAudio = document.getElementById("myTune");如果(myAudio.paused){myAudio.play();} 别的 {myAudio.pause();}}<audio id="myTune"><source src="./audio/rain.mp3"><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>

它可以工作，但是在 reactjs 中，我使用了下面三个具有相同路径的 html 文件，但是代码不能那样工作，我得到了一个空白网站.对不起，我的英语不好.index.html

<html lang="zh-cn"><头><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"><身体><div id="root"></div></html>

Test.js

var React = require('react');var 测试 = React.createClass( {aud_play_pause() {var myAudio = document.getElementById("myTune");如果(myAudio.paused){myAudio.play();} 别的 {myAudio.pause();}},使成为 () {返回(<div><audio id="myTune"><source src="./audio/rain.mp3"/><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>

);}});导出默认测试；

index.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./Test'导入测试；ReactDOM.render(<测试/>,document.getElementById('root'));

解决方案

onClick 在 react 中需要一个函数.但是当您执行 onClick = {this.aud_play_pause()} 时，它会返回一个 value .将 onClick 定义更改为 

onClick = {this.aud_play_pause}

代码:

var React = require('react');var 测试 = React.createClass( {aud_play_pause() {var myAudio = this.mytune;如果(myAudio.paused){myAudio.play();} 别的 {myAudio.pause();}},使成为 () {返回(<div><audio id="myTune" ref = {(ip)=>{this.mytune = ip}}><source src={require("./audio/rain.mp3")}/><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>
);}});导出默认测试；

您还需要一个打包器，例如 webpack 来转译您的代码.

查看设置示例这里:

此外，如果您使用最新版本的 React ，您将收到警告，在 v15.5.0 之后 React.createClass 将被弃用因此最好从 React.Component

开始

从'react'导入React；类测试扩展了 React.Component{aud_play_pause() {var myAudio = this.myTune;如果(myAudio.paused){myAudio.play();} 别的 {myAudio.pause();}}使成为 () {返回(<div><audio id="myTune" ref={(ip) =>{this.mytune = ip}}><source src={require("./audio/rain.mp3")}/><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>
);}}导出默认测试；

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')
);

解决方案

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;

这篇关于Reactjs 音频按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆