2014-01-09 4 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

하는 I는 다음과 같이합니다 (div.click 내부의 함수 호출)를 사용했습니다 당신은 멀티미디어가 더 많은 웹 탐험가와 호환되도록하려는 경우 jplayer 시도해야 또한

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

관련 문제