javascript - Javascript は、ホバー時にサウンドを再生します。ホバーオフで停止してリセットする

Question

function EvalSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.currentTime = 0;  
    thissound.Play();
}

function StopSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.Stop();
}

これは、オーディオファイルを再生するための私のコードです。

onmouseover="EvalSound('sound1')" onmouseout="StopSound('sound1')"

現在、ホバーに取り組んでいますが、その下で再生される画像に戻ると、最初に戻らず、再生を続けます

score 9 · Accepted Answer

これは、マウスオーバーでオーディオファイルを再生し、マウスアウトで停止する簡単な例です。

HTML:

<p onmouseover="PlaySound('mySound')" 
    onmouseout="StopSound('mySound')">Hover Over Me To Play</p>

<audio id='mySound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg'/>

Javascript:

function PlaySound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.play();
}

function StopSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.pause();
    thissound.currentTime = 0;
}

詳細については、オーディオとビデオの埋め込みに関する MDN ガイドをご覧ください。

score 1 · Accepted Answer

オーディオの開始と停止について、同じ質問がありました。他のプラグインなしでjQueryを使用しています。私のコードはマウスダウンとマウスアップ用ですが、他のアクションに変更できます。

HTML

<div class="soundbutton">
   cool wind sound
</div>
<audio id="wind-sound" src="wind-sound/wind.mp3">

Javascript

$('.soundbutton').on('mousedown', function () {     
    playWind();                                  //start wind sound
})
.on('mouseup', function () {                    
    stopWind();                                  //stops the wind sound
});


// my full functions to start and stop

function playWind () {                           //start wind audio
  $('#wind-sound')[0].volume = 0.7;
  $('#wind-sound')[0].load();
  $('#wind-sound')[0].play();
}
function stopWind () {                           //stop the wind audio
  $('#wind-sound')[0].pause();
  $('#wind-sound')[0].currentTime = 0;           //resets wind to zero/beginning
}

score 0 · Accepted Answer

<html>

<script>
function stopAudio() {                      
player.pause();
player.currentTime = 0;           
}
</script>


<body>
<audio id="player" src="(place audio here)"></audio>

<div> 
<button onclick=" stopAudio()">Stop</button>
</div>

</body>
</html>

// 終わりの注: 私のオーディオ ID は「player」と名付けられているため、オーディオ ID を確認する必要があります。これが機能していない理由で、css と html を行内で非常によく見てください。あなたが注意しなければならないもう1つのことは、あなたのcall関数です。この関数は、call メソッドを適切に使用した場合にのみ css で機能します。

javascript - Javascript は、ホバー時にサウンドを再生します。ホバーオフで停止してリセットする

3 に答える 3

Related

Reference