2つのクリックする異文（テキストと画像）と再生音声

Question

私はそれぞれのonclick="playAudio()"に属性を追加するテキストとイメージを持っています。

次のようにします。オーディオを再生しているテキストをクリックすると、イメージをクリックすると、テキストでオーディオが再生され、イメージでオーディオが再生されます。 それを作る方法は？

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

はそのため過度に単純化したコードです：

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属性に入る必要があります。

Answer 2

のdoesnをタグ付けする

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 3

..私たちがクリックされた要素のと比べてtagNameはそれに応じて条件を入れて得ることができるので、スニペットの引数としてthisを渡す以下の複数のオーディオソースを見つけてください。このように働かないでください。

テキストをクリックした直後に画像を処理する必要がある場合は、このような機能が有効です。ここで

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

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