Reactjs 音频按钮?
[英] Reactjs Audio button?
本文介绍了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屋!
查看全文