HTML - 画像をクリックしたときに音声を再生して一時停止する方法はありますか？

Question

私はこのウェブサイトで見つけたコードを試しましたが、何らかの理由でそれが動作しません。ここの誰かが助けてくれることを願います。 gifをクリックすると曲が再生されますが、もう一度gifをクリックすると再生されます。ここ
は、私が使用したコードです：

<img src="lilgif.gif" alt="Play Button" onclick="StartOrStop('boss.mp3')"> 

<audio id="myAudio"></audio> 

スクリプト：中括弧内の他の文は次のように を喜ば場合

function StartOrStop(audioFile) { 
var audio = document.getElementById("myAudio"); 
if (!audio.src || audio.src !== audioFile) audio.src = audioFile; 
if (audio.paused == false) 
    audio.pause(); 
else 
    audio.play(); 
} 

Answer 1

は私が作ったこの作業例を持っている：

workign audio play pause on image

HTML：

<img id="startOrStopImg" src="http://wallpaper-gallery.net/images/dope-pictures/dope-pictures-17.jpg" alt="Play Button"> 
<audio id="audio" src="http://www.soundjig.com/pages/soundfx/futuristic.php?mp3=scifi21.mp3" type="audio/mp3" controls> 
Your browser does not support the audio element. 
</audio> 

あなたがコントロールで使用できるかなしでご希望の場合のみ、画像と対話します。古いブラウザにHTML5オーディオがないことを忘れないでください。問題がどこにあるかをユーザーに伝えるために、テキスト、イメージなどを配置する必要があります。

ここでは特別なことはありませんが、簡単な向きと実際のファイルのためにいくつかのIDを付けて、リモートでホストできることをテストできます。

JS：基本的に

document.getElementById("startOrStopImg").onclick = function() { 
    var audio = document.getElementById("audio"); 
    if (audio.paused) audio.play(); 
    else audio.pause(); 
}; 

は、私の守備の機能をバインド（これはHTML onclickの結合にまで好まれている）、私は他の場所でそれを使用しておりませんので、値としてそのすべてを処理するために、アノン機能を書かれました。

再生するかどうかを確認するためにオーディオ要素APIにアクセスし、再生または一時停止します。

編集：完全な例については、リモートでホストされた画像を修正して入れました。今より良く見えます。

Answer 2

あなたを囲むことができます。

if (audio.paused == false){ 
     audio.pause(); 
}else{ 
     audio.play(); 
}