Animation de bouton de lecture

J'ai un code qui commence à jouer de l'audio lorsque je clique sur l'image. J'ai besoin d'aide pour l'éditer. Je voudrais faire ainsi quand je clique sur l'image il devrait commencer à jouer l'audio, mais change également l'image à l'autre. Savez-vous comment le faire?Animation de bouton de lecture

code:

<!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>

Source

2017-08-20 Beginner

Essayez quelque chose comme ceci:

<!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>

Tout ce que je simplement ai été ajouter une nouvelle fonction appelée updateImage qui modifie la src image en fonction de si l'audio est en pause ou non .

JSFiche: https://jsfiddle.net/b0wgh4em/1/

Source

2017-08-20 14:16:45 bdkopen

Oui, quelque chose comme ça. Mais savez-vous comment faire pour que l'image change après le premier clic? Donc, au début, il devrait montrer "pausebutton" et quand vous cliquez dessus crier changer pour "playbutton" – Beginner

Animation de bouton de lecture

Répondre

Questions connexes