バックグラウンドの音声が終わったら、最初の画像に戻ってください。

私は、楽しみとポートフォリオのために、風刺サイトを作成しました。しかし、私も問題があります。私はJavaScriptが初めてで、簡単ではありません。バックグラウンドの音声が終わったら、最初の画像に戻ってください。

自分のサイトのボタンをクリックして何かを作成しました。それはランダムな音を演奏し、それは2番目の画像に入れて、
残念ながら、私は元の画像に戻す方法がわからない、サウンドが完了した後、また、ボタンをクリックすると、次の音最初の音を再生します。

$(document).ready(function() { 
 
    $("button").click(function() { 
 

 

 

 
    var bild = "bilder/st_2a.png" 
 
    var audio_files = [ 
 
     "sounds/beschnitten/bsound1.mp3", 
 
     "sounds/beschnitten/bsound2.mp3", 
 
     "sounds/beschnitten/bsound3.mp3", 
 
     "sounds/beschnitten/bsound4.mp3", 
 
     "sounds/beschnitten/bsound5.mp3" 
 
    ] 
 

 
    var random_file = audio_files[Math.floor(Math.random() * audio_files.length)]; 
 

 
    var audio = new Audio(random_file); 
 

 

 
var gesamt = audio.play() + bild;

<body> 
 

 
<h1>Blocher der wahre Retter der Schweiz</h1> 
 
    <p>Bitte klicken Sie den Knopf immer wieder an! V 1.0</p> 
 
    <div id="blocherw"> 
 
    <img id="blocherbild" src="bilder/st_a.png" width="600" height="620" alt="standsbild_ausgeschnitten"> 
 
    <button id="blocherzufall">KLICK!</button> 
 

 
    </div> 
 
<script> 
 
</script> 
 

 

 
</body>

優しい点

出典

2017-12-11 Leandra Hartmann

<html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <script> 
$(document).ready(function() { 
    var sound_playing = false; 
    var bild = "bilder/st_2a.png"; 
    var erstes_bild = "bilder/st_a.png"; 
    var audio_files = [ 
     "sounds/beschnitten/bsound1.mp3", 
     "sounds/beschnitten/bsound2.mp3", 
     "sounds/beschnitten/bsound3.mp3", 
     "sounds/beschnitten/bsound4.mp3", 
     "sounds/beschnitten/bsound5.mp3" 
    ]; 
    $("button").click(function() { 
     if (sound_playing) return; 
     var random_file = audio_files[Math.floor(Math.random() * audio_files.length)]; 
     var audio = new Audio(random_file); 
     document.getElementById("blocherbild").src = bild; 
     audio.onended = function() { 
      document.getElementById("blocherbild").src = erstes_bild; 
      sound_playing = false; 
     } 
     sound_playing = true; 
     audio.play(); 
    }); 
}); 
     </script> 
     <h1>Blocher der wahre Retter der Schweiz</h1> 
     <p>Bitte klicken Sie den Knopf immer wieder an! V 1.0</p> 
     <div id="blocherw"> 
      <img id="blocherbild" src="bilder/st_a.png" width="600" height="620" alt="standsbild_ausgeschnitten"> 
      <button id="blocherzufall">KLICK!</button> 
     </div> 
    </body> 
</html>

私は、これはあなたが必要なコードだと思います。

私がしたのは、元の画像を変数に保存したことでした。私はイメージを変更しました。それから私は音を出し、それが終わるのを待った。その後、イメージを元に戻しました。

希望すると便利です。

EDIT：サウンドが再生されているかどうかを検出する変数を作成しました。次に、サウンドが再生されていない場合は関数を使用します。

出典

2017-12-11 04:22:18 oriont

あなたのコーディングスタイルのように、ありがとうございました:)しかし、オーディオの実行中にもう一度ボタンをクリックすると、サウンドのオーバーレイを避ける方法を知っていますか？ –

私はあなたの必要に応じて自分の答えを変えました。お役に立てれば！ – oriont

質問に答えるだけでいいのなら、それは素晴らしいだろう。ありがとう！ – oriont

バックグラウンドの音声が終わったら、最初の画像に戻ってください。

答えて

関連する問題