再生ボタンアニメーション

イメージをクリックすると、オーディオの再生を開始するコードが1つあります。私はそれを編集するために助けが必要です。画像をクリックすると、音声を再生するはずですが、画像を別の画像に変更する必要があります。あなたはそれをする方法を知っていますか？再生ボタンアニメーション

コード：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     function playSound(el,soundfile) { 
      if (el.mp3) { 
       if(el.mp3.paused) el.mp3.play(); 
       else el.mp3.pause(); 
      } else { 
       el.mp3 = new Audio(soundfile); 
       el.mp3.play(); 
      } 
     } 
    </script> 
    </head> 
<body> 
<span id="dummy" onclick="playSound(this, 'http://listen.shoutcast.com/newfm128mp3');"> 
    <img src="https://static.wixstatic.com/media/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png/v1/crop/x_10,y_33,w_52,h_51/fill/w_52,h_51,al_c/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png" name="Bottom-1" width="50" height="45" border="0" id="Bottom-1"/> 
</span> 
</body> 
</html>

出典

2017-08-20 Beginner

はこのような何かを試してみてください：私は単純にやった

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     //Create new function that will update the image source on click. 
     function updateImage(el, soundfile) { 
      //Determine if music is playing or paused then adjust image source accordingly. 
      if(soundfile.mp3.paused) { 
       el.src = "pausedImageSrc"; 
      } else { 
       el.src = "playImageSrc"; 
      } 
     }; 

     function playSound(el,soundfile) { 
      if (el.mp3) { 
       if(el.mp3.paused) el.mp3.play(); 
       else el.mp3.pause(); 
      } else { 
       el.mp3 = new Audio(soundfile); 
       el.mp3.play(); 
      } 
      //Call new function made whenever the sound is toggled. 
      updateImage(document.getElementById("Bottom-1"), el); 
     }; 
    </script> 
    </head> 
<body> 
<span id="dummy" onclick="playSound(this, 'http://listen.shoutcast.com/newfm128mp3');"> 
    <img src="https://static.wixstatic.com/media/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png/v1/crop/x_10,y_33,w_52,h_51/fill/w_52,h_51,al_c/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png" name="Bottom-1" width="50" height="45" border="0" id="Bottom-1"/> 
</span> 
</body> 
</html>

すべては、オーディオが一時停止されているかどうかに基づいて画像srcを変更updateImageと呼ばれる新しい機能を追加しました。

JSFiddle：https://jsfiddle.net/b0wgh4em/1/

出典

2017-08-20 14:16:45 bdkopen

そうですね。しかし、最初のクリック後にイメージの変更を行う方法を知っていますか？だから、最初に "一時停止ボタン"が表示され、クリックすると "再生ボタン" – Beginner

再生ボタンアニメーション

答えて

関連する問題