两次单击差异（文本和图像）并播放音频

Question

我有一个文本和一个图像，我为每个文本和图像添加了一个属性 onclick="playAudio()"。

<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test">

我想做以下事情。如果我单击文本播放音频，否则如果我单击图像停止在文本处播放音频并在图像处播放音频。怎么做到的？

HTML 音频。

<audio id="myAudio">
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

和JS。

var x = document.getElementById("myAudio");
function playAudio() {
    x.play();
}

Answer 1

请在下面找到将 this 作为参数传递的代码片段，以便我们可以获得 tagName 被点击的元素，然后相应地设置条件..

var x = document.getElementById("myAudio");
function playAudio(e) {
  if(e.tagName == "IMG")
    {
     alert('Stop') ; 
    }
  if(e.tagName == "H1")
    {
     alert('Play') ;
    }
  
}

<h1 class="underline-on-hover" onclick="playAudio(this)" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio(this)" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test" />

Answer 2

要标记的多个音频源无法以这种方式工作。

如果您只需要在文本点击后立即处理图片点击，这样的方法应该可行。

 var img = document.getElementById("img");
 function playAudio() {
  x = new Audio("sound.mp3");
  x.play();
    img.addEventListener('click',changeAudio(x));
 }
 function changeAudio(x){
  return function(){
   x.pause();
   x.src = "sound2.mp3";
   x.play();
  }
 }

<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onmouseover="" style="cursor: pointer;" id="img"
 class="img-responsive" src="imagetest.png" alt="Image Test">

Answer 3

这是一个过于简单的代码：

var audio1 = document.getElementById("audio1"),
  audio2 = document.getElementById("audio2"),
  whoIsPlaying = null;

function clickOnH1() {

  if (whoIsPlaying != 'H1') {

    audio2.pause();
    audio1.play();
    whoIsPlaying = 'H1';
  }
}

function clickOnIMG() {

  if (whoIsPlaying != 'IMG') {

    audio1.pause();
    audio2.play();
    whoIsPlaying = 'IMG';
  }
}

clickOnH1函数应该进入H1标签的onclick属性，clickOnIMG函数应该进入IMG标签的onclick属性。

两次单击差异（文本和图像）并播放音频

Two click differnets (Text and Image) and play audio

javascript

html5-audio