機能でオーディオを一時停止または一時停止する

Question

私のウェブサイトは音楽を再生していますが、ボタンをクリックして音楽を一時停止または一時停止することもできます。特にautoplayや.onloadが動作しないOSXの場合しかし、どこで私がonclickイベントに間違っていたのかわかりません。

<script type="text/javascript"> 
var audio = new Audio('/Sounds/Macintosh.mp3'); 
function detectmob() { 
     if(navigator.userAgent.match(/Android/i) //Checks if on mobile 
     || navigator.userAgent.match(/webOS/i) 
     || navigator.userAgent.match(/iPhone/i) 
     || navigator.userAgent.match(/iPad/i) 
     || navigator.userAgent.match(/iPod/i) 
     || navigator.userAgent.match(/BlackBerry/i) 
     || navigator.userAgent.match(/Windows Phone/i) 
     ){ 
       return true; 
      } 
     else { 
       var audio = new Audio('/Sounds/Macintosh.mp3'); 
       audio.play(); 
       } 
} 

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


} 
window.onload = detectmob; 
</script> 
<center> <input type="image" onclick="Pause" src="/images/button.jpg" style="width:750px;height:400px;"></center> 

第2の機能（一時停止）を実装した後、最初の機能は機能しなくなりました。これで、画像をクリックするのと無関係に、サウンドは再生されません。

Answer 1

いくつかの問題があります。

ファンクション名の後ろに括弧()を追加するのを忘れたようですが、関数を呼び出す必要があります。

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

は次のようになります。

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

また、onclickの定義に追加するのを忘れました。

<input type="image" onclick="Pause" src="/images/button.jpg" style="width:750px;height:400px;"> 

は次のようになります。全体的に

<input type="image" onclick="Pause()" src="/images/button.jpg" style="width:750px;height:400px;"> 

あなたのコードを次のようになります。

<script type = "text/javascript" > 
    var audio = new Audio('/Sounds/Macintosh.mp3'); 

function detectmob() { 
    if (navigator.userAgent.match(/Android/i) //Checks if on mobile 
    || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) 
) { 
    return true; 
    } else { 
    var audio = new Audio('/Sounds/Macintosh.mp3'); 
    audio.play(); 
    } 
} 

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


} 
window.onload = detectmob(); 

</script> 

<center> 
    <input type="image" 
       onclick="Pause()" 
       src = "/images/button.jpg" 
       style = "width:750px; height:400px;"> 
</center>