播放和暫停以播放聲音

Question

我試圖讓這4個按鈕添加到代碼中以稍後提示第5個按鈕，但是您可以忽略這一個atm。我想要的是，當我點擊一個按鈕時會播放聲音，但如果我點擊不同的聲音，它會暫停當前的聲音並播放新的聲音。我似乎並沒有得到它的工作。

CODE：

<audio id="sound1" src="monkey.mp3"></audio> 
<audio id="sound2" src="sounds/sound2.mp3"></audio> 
<audio id="sound3" src=".mp3"></audio> 
<audio id="sound4" src=".mp3"></audio> 
<audio id="sound5" src=".mp3"></audio> 

<button onclick="playSound1()">Sound 1</button><br /> 
<button onclick="playSound2()">Sound 2</button><br /> 
<button onclick="playSound3()">Sound 3</button><br /> 
<button onclick="playSound4()">Sound 4</button><br /> 
<button onclick="playSound5()">Sound 5</button><br /> 

<script type="text/javascript"> 
var audio1 = document.getElementById('sound1'); 
var audio2 = document.getElementById('sound2'); 
var audio3 = document.getElementById('sound3'); 
var audio4 = document.getElementById('sound4'); 
function playSound1(){ 
if ((audio1.paused !== true) && (audio.3paused !== true) && (audio4.paused !==){ 
    audio1.pause(); 
    audio3.pause(); 
    audio4.pause(); 
    audio2.play(); 
    } 
else{ 
    audio2.play(); 
    } 
} 
function playSound2(){ 
if (audio2.paused !== true){ 
    audio2.pause(); 
    audio3.pause(); 
    audio4.pause(); 
    audio1.play(); 
    } 
else{ 
    audio1.play(); 
    } 
} 
function playSound3(){ 
if (audio2.paused !== true){ 
    audio2.pause(); 
    audio1.pause(); 
    audio3.pause(); 
    audio4.play(); 
    } 
else{ 
    audio4.play(); 
    } 
} 
function playSound4(){ 
if (audio2.paused !== true){ 
    audio2.pause(); 
    audio4.pause(); 
    audio1.pause(); 
    audio3.play(); 
    } 
else{ 
    audio3.play(); 
    } 
} 

</script> 

Answer 1

var audio1 = document.getElementById('sound1'); 
 
var audio2 = document.getElementById('sound2'); 
 
var audio3 = document.getElementById('sound3'); 
 
var audio4 = document.getElementById('sound4'); 
 

 
var current = ""; 
 

 
var playSound = function(soundNumber){ 
 
    switch(soundNumber) 
 
     { 
 
     case 1: 
 
      audio1.play(); 
 
      audio2.pause(); 
 
      audio3.pause(); 
 
      audio4.pause(); 
 
      break; 
 
     case 2: 
 
      audio1.pause(); 
 
      audio2.play(); 
 
      audio3.pause(); 
 
      audio4.pause(); 
 
      break; 
 
     case 3: 
 
      audio1.pause(); 
 
      audio2.pause(); 
 
      audio3.play(); 
 
      audio4.pause(); 
 
      break; 
 
     case 4: 
 
      audio1.pause(); 
 
      audio2.pause(); 
 
      audio3.pause(); 
 
      audio4.play(); 
 
      break; 
 
     default: 
 
      var audio = document.getElementById("sound"+soundNumber); 
 
      audio.play(); 
 
      audio1.pause(); 
 
      audio2.pause(); 
 
      audio3.pause(); 
 
      audio4.pause(); 
 
      break; 
 
     } 
 
}

<audio id="sound1" src="monkey.mp3"></audio> 
 
<audio id="sound2" src="sounds/sound2.mp3"></audio> 
 
<audio id="sound3" src=".mp3"></audio> 
 
<audio id="sound4" src=".mp3"></audio> 
 
<audio id="sound5" src=".mp3"></audio> 
 

 
<button onclick="playSound(1)">Sound 1</button><br /> 
 
<button onclick="playSound(2)">Sound 2</button><br /> 
 
<button onclick="playSound(3)">Sound 3</button><br /> 
 
<button onclick="playSound(4)">Sound 4</button><br /> 
 
<button onclick="playSound(5)">Sound 5</button><br />

°5所述的按鈕應使用默認開關殼體工作。如果你必須一般地添加按鈕，你的功能將不得不改變。

Answer 2

你可以用簡短的代碼使用jQuery來做到這一點。

首先。設置data-屬性指向音頻元素ID

<button data-audio="sound1">Sound 1</button>

然後綁定事件。

$('button[data-audio]').click(function(){ 
    $current = $('#' + $(this).attr('data-audio'))[0]; 
    /* check all audio elements */ 
    $('audio').each(function(){ 
     if(this != $current) 
      this.pause(); 
     else 
      this.play(); 
    }); 
}); 

Fiddle