2014-01-09 115 views
1

我想點擊某些div時播放某些聲音。它不工作。但是,當我添加4 * xTone.setAttribute('autoplay','autoplay')時,它會同時播放所有聲音; (4個音調各一個)。所以,我認爲這有點縮小了。這是我的代碼:點擊播放聲音,HTML/jQuery

<body> 

    <div id="header">Header</div> 

    <script src="http://code.jquery.com/jquery-2.0.3.js" 
    type="text/javascript"></script> 

    <script> 

     var eTone = document.createElement('audio'); 
     eTone.setAttribute('src', 'eTone.mp3'); 

     $('#eTone').click(function(){ 
      eTone.play(); 
     }); 

     var fTone = document.createElement('audio'); 
     fTone.setAttribute('src', 'fTone.mp3'); 

     $('#fTone').click(function(){ 
      fTone.play(); 
     }); 

     var gTone = document.createElement('audio'); 
     gTone.setAttribute('src', 'gTone.mp3'); 

     $('#gTone').click(function(){ 
      gTone.play(); 
     }); 

     var aTone = document.createElement('audio'); 
     aTone.setAttribute('src', 'aTone.mp3'); 

     $('#aTone').click(function(){ 
      aTone.play(); 
     }); 

    </script> 

    <table id="musiccloud"> 
     <tr> 
      <td><div id="eTone" class="rain"></div></td> 
     </tr> 
     <tr> 
      <td><div id="fTone" class="rain"></div></td> 
     </tr> 
     <tr> 
      <td><div id="gTone" class="rain"></div></td> 
     </tr> 
     <tr> 
      <td><div id="aTone" class="rain"></div></td> 
     </tr> 
    </table> 

</body> 

當他們的每個div被點擊時我該怎麼做4種不同的音調?

回答

2

我用這樣的事情(調用div.click裏面的功能):

<script> 
function play(cancion){ 
     var can = document.getElementsByTagName('audio')[cancion]; 
     can.play(); 
    } 
function stop(){ 
     can = document.getElementsByTagName('audio')[0]; 
     can.pause(); 
     can = document.getElementsByTagName('audio')[1]; 
     can.pause(); 
     can = document.getElementsByTagName('audio')[2]; 
     can.pause(); 
    } 

</script> 
<audio id="song1"> 
    <source src="song1.mp3" type="audio/mpeg"> 
    <source src="song1.ogg" type="audio/ogg"> 
</audio> 
<audio id="song2"> 
    <source src="song2.mp3" type="audio/mpeg"> 
    <source src="song2.ogg" type="audio/ogg"> 
</audio> 

另外如果你想在多媒體與更多的網絡探險兼容,你應該嘗試jplayer