ReactJSでサウンドを再生するボタンをクリック

反応するJSを使用してサウンドや音楽を再生するボタンを作成するのに問題があります。ReactJSでサウンドを再生するボタンをクリック

誰か助けてもらえますか？

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     </head> 
<script type="text/javascript"> 

function aud_play() 
{ 

    var myAudio= document.getElementById('myTune') 
    if(myAudio){ 
    myAudio.play(); 
     } else 
     { 
      myAudio.pause(); 
     } 
    } 
    </script> 
    <body> 
     <audio id="myTune" src="laugh.mp3"></audio> 
     <button type="button" onclick="aud_play"></button> 
    </body> 
    </html>

出典

2017-11-26 lavender

https://codepen.io/asommer70/pen/JGdGge –

表示を必要としますあなたが今までに試したことを私たちに教えてください。 –

あなたは何を試しましたか、そしてまさに問題は何ですか？（ボタンを作成することはできますが、サウンドは再生されません。サウンド再生はできますか？ボタンのクリックはできません） –

オーディオ/ビデオの再生は、あなたがclickかtouch内のビデオを再生する必要があるので、ユーザーは、ほとんどの携帯ブラウザで発射した場合にトリガしなければなりません。 onClick（ほとんどの場合、これをイベントの処理に使用する）が機能していない場合、おそらくオーディオ再生を直接起動しません（たとえば、setTimeout）。このコードを試してみて、それでも動作しない場合、それは直接、オーディオ再生をトリガー確保し、私はあなたが例のフィドルを投稿

import { 
 
    Component 
 
} from 'react' 
 
import $ from 'jquery' 
 

 
class MyComponent extends Component { 
 
    constructor(props) { 
 
    super(props) 
 
    } 
 

 
    componentDidMount() { 
 
    this._btnListener =() => { 
 
     this.audio.play() 
 
    } 
 
    $(this.btn).bind('click', this._btnListener) 
 
    } 
 
    componentWillUnmount() { 
 
    $(this.btn).unbind('click', this._btnListener) 
 
    } 
 

 
    render() { 
 
    return (<div> 
 
    <button ref={(btn)=>this.btn=btn}>play</button> 
 
    <audio ref={(audio)=>this.audio=audio} src="xxx.mp4" /> 
 
    </div>) 
 
    } 
 

 
}

出典

2017-11-26 01:41:58

シンプルなhtmlでコードを更新しましたが、reactJS – lavender

でそれを変換する手助けをしてくれました。ここで議論するには十分なスペースが必要です。https://reactjs.org/ @lavender –

ReactJSでサウンドを再生するボタンをクリック

答えて

関連する問題