播放和暂停以播放声音

问题描述：

我试图让这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>

答

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所述的按钮应使用默认开关壳体工作。如果你必须一般地添加按钮，你的功能将不得不改变。

答

你可以用简短的代码使用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

播放和暂停以播放声音

相关推荐