单击按钮在REactJS上播放声音

时间:2017-11-26 01:21:49

标签: reactjs

我无法使用反应JS创建播放声音或音乐的按钮。

有人可以帮我解决这个问题。

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

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <script type="text/javascript">
            function aud_play() {
                var myAudio= document.getElementById('myTune')
                if(document.getElementById('myTune').play == true) {
                    myAudio.pause();
                } else {
                    myAudio.play();
                }
                // Alternatively, you could try the line below
                // This inverts it's value from true to false and vice versa
                // document.getElementById('myTune').pause() = !document.getElementById('myTune').pause()
            }
        </script>
    </head>

    <body>
        <audio id="myTune">
            <source src="laugh.mp3"></source>
        </audio>
     <button type="button" onclick="aud_play()"></button>

</body>
</html>
  1. <script>标签应位于<head>标签内。

  2. 尝试使用aud_play()而不是aud_play

  3. 您需要将src放在<source>标记内,并将<source>标记放在<audio>内。

  4. 顺便说一句,这不是React JS,它仍然只是普通的html文件。在React JS中执行此操作是一个完全不同的故事,因为document.getElementById('…')不起作用。这是指向React's documentations的快速链接。